jQuery无缝轮播
来源：互联网 发布：python怎么往矩阵输入 编辑：程序博客网 时间：2024/05/16 07:15
轮播图老是用插件怎么行，简易的jQuery无缝轮播！
<!DOCTYPE html>
<html>
<html>
<head>
<meta charset="UTF-8">
<title> slider </title>
<style>
html,
body {
height: 100%;
width: 100%;
font-size: 62.5%;
}
* {
margin: 0;
padding: 0;
list-style: none;
}
.banner {
margin: auto;
width: 65.85rem;
height: 28.35rem;
overflow: hidden;
position: relative;
}
.banner .imgs {
width: 600%;
height: 100%;
position: absolute;
}
.banner .imgs img {
width: 65.85rem;
height: 28.35rem;
float: left;
}
.banner .btn span {
display: inline-block;
width: 4em;
height: 5em;
line-height: 5em;
font-size: 2em;
opacity: 0.5;
background: #ccc;
color: #fff;
text-align: center;
position: absolute;
top: 11.67em;
left: 0;
}
.banner .btn .next {
left: 61.85rem;
}
.banner .horse {
position: absolute;
bottom: 0;
left: 25.42rem;
}
.banner .horse span {
display: block;
float: left;
width: 1rem;
height: 1rem;
border-radius: 50% 50%;
margin: 1rem;
background: yellow;
}
.banner .horse .active {
background: #c60023;
}
</style>
</head>
<meta charset="UTF-8">
<title> slider </title>
<style>
html,
body {
height: 100%;
width: 100%;
font-size: 62.5%;
}
* {
margin: 0;
padding: 0;
list-style: none;
}
.banner {
margin: auto;
width: 65.85rem;
height: 28.35rem;
overflow: hidden;
position: relative;
}
.banner .imgs {
width: 600%;
height: 100%;
position: absolute;
}
.banner .imgs img {
width: 65.85rem;
height: 28.35rem;
float: left;
}
.banner .btn span {
display: inline-block;
width: 4em;
height: 5em;
line-height: 5em;
font-size: 2em;
opacity: 0.5;
background: #ccc;
color: #fff;
text-align: center;
position: absolute;
top: 11.67em;
left: 0;
}
.banner .btn .next {
left: 61.85rem;
}
.banner .horse {
position: absolute;
bottom: 0;
left: 25.42rem;
}
.banner .horse span {
display: block;
float: left;
width: 1rem;
height: 1rem;
border-radius: 50% 50%;
margin: 1rem;
background: yellow;
}
.banner .horse .active {
background: #c60023;
}
</style>
</head>
<body>
<div class="banner">
<div class="imgs">
<img src="img/banner1.jpg">
<img src="img/banner2.jpg">
<img src="img/banner3.jpg">
<img src="img/banner4.jpg">
<img src="img/banner5.jpg">
</div>
<div class="btn">
<span class="prev">prev</span>
<span class="next">next</span>
</div>
<div class="horse">
<span rel="1" class="active"></span>
<span rel="2"></span>
<span rel="3"></span>
<span rel="4"></span>
<span rel="5"></span>
</div>
</div>
</body>
<script src="js/jquery-1.8.3.js"></script>
<script>
var page = {
init: function() {
this.onload();
},
onload: function() {
var index = 0;
var timer = null;
var imgFirst = $(".imgs img:first").clone();//将第一张图片复制
$(".imgs").append(imgFirst);//将所复制的一图添加到最后，共六张图
<div class="banner">
<div class="imgs">
<img src="img/banner1.jpg">
<img src="img/banner2.jpg">
<img src="img/banner3.jpg">
<img src="img/banner4.jpg">
<img src="img/banner5.jpg">
</div>
<div class="btn">
<span class="prev">prev</span>
<span class="next">next</span>
</div>
<div class="horse">
<span rel="1" class="active"></span>
<span rel="2"></span>
<span rel="3"></span>
<span rel="4"></span>
<span rel="5"></span>
</div>
</div>
</body>
<script src="js/jquery-1.8.3.js"></script>
<script>
var page = {
init: function() {
this.onload();
},
onload: function() {
var index = 0;
var timer = null;
var imgFirst = $(".imgs img:first").clone();//将第一张图片复制
$(".imgs").append(imgFirst);//将所复制的一图添加到最后，共六张图
function animate() {
var width_ = $(".imgs img:first").width();//获取每张图片的宽度
if(index == 6) {
index = 1;$(".imgs").css("left", 0);//轮播到第六张图片时设置index便于跑马灯的同步，并将left归0，完成衔接
}
$(".imgs").animate({ left: -index * width_ + "px" }, 200, "linear");
if(index == 5) {
$(".horse span").removeClass("active").eq(0).addClass("active");//由于index=5时展示图片为第一张（实为复制的那一张，第六张）跑马灯需设置同步
} else {
$(".horse span").removeClass("active").eq(index).addClass("active");
}
};
$(".imgs,.btn,.horse").mouseover(function() {
clearInterval(timer);
});
$(".imgs,.btn,.horse").mouseout(function() {
timer = setInterval(function() {
index++;
animate();
//console.log(index);
}, 2000)
})
$(".horse span").mouseover(function(){
index = $(this).attr("rel")-1;
//alert(index)
animate();
});
// $(".next").click(function() {
// index++;
// animate();
// });
// $(".prev").click(function() {
// index--;
// if(index < 0)index = 4;
// animate();
// });
$(".btn span").click(function(){
if($(this).hasClass("next")){
index++;
}else{
index--;if(index < 0)index = 4;
};
animate();
})
timer = setInterval(function() {
index++;
animate();
//console.log(index);
}, 2000)
}
};
$(function() {
page.init();
})
</script>
var width_ = $(".imgs img:first").width();//获取每张图片的宽度
if(index == 6) {
index = 1;$(".imgs").css("left", 0);//轮播到第六张图片时设置index便于跑马灯的同步，并将left归0，完成衔接
}
$(".imgs").animate({ left: -index * width_ + "px" }, 200, "linear");
if(index == 5) {
$(".horse span").removeClass("active").eq(0).addClass("active");//由于index=5时展示图片为第一张（实为复制的那一张，第六张）跑马灯需设置同步
} else {
$(".horse span").removeClass("active").eq(index).addClass("active");
}
};
$(".imgs,.btn,.horse").mouseover(function() {
clearInterval(timer);
});
$(".imgs,.btn,.horse").mouseout(function() {
timer = setInterval(function() {
index++;
animate();
//console.log(index);
}, 2000)
})
$(".horse span").mouseover(function(){
index = $(this).attr("rel")-1;
//alert(index)
animate();
});
// $(".next").click(function() {
// index++;
// animate();
// });
// $(".prev").click(function() {
// index--;
// if(index < 0)index = 4;
// animate();
// });
$(".btn span").click(function(){
if($(this).hasClass("next")){
index++;
}else{
index--;if(index < 0)index = 4;
};
animate();
})
timer = setInterval(function() {
index++;
animate();
//console.log(index);
}, 2000)
}
};
$(function() {
page.init();
})
</script>
</html>
阅读全文
0 0
- jQuery无缝轮播
- jQuery无缝轮播
- jquery 无缝轮播
- jQuery制作无缝轮播
- jquery实现无缝轮播
- jquery实现无缝图片轮播
- jquery自动无缝轮播代码
- jquery广告无缝轮播代码实例
- jquery实现轮播图的无缝轮播
- 无缝轮播切换
- 图片无缝轮播
- 无缝轮播
- 无缝轮播
- 无缝轮播
- js无缝轮播
- 无缝轮播图片
- 无缝轮播demo
- 实现无缝轮播
- 第三章：操作符
- 深入浅出SQL触发器
- 假如时光倒流，我会这么学习Java
- Softmax分类器
- 二进制输出
- jQuery无缝轮播
- 像个专业人士一样去调试Bug
- Mac 命令行
- 第十三周 【项目3
- 装饰器
- Java集合框架之TreeMap的排序
- 【Qt Creator】下载链接
- linus下安装MyCat
- Pytorch
