层叠样式的轮播效果
静态效果图如下：
1、定义静态样式：使用z-index来实现层级
2、将图片的类放在一个数组中，每次通过改变数组的排列来实现图片的变化
3、进入页面就要开始定时器；鼠标移入mouseover，清除定时器clearInterval；鼠标移出mouseleave，开始定时器setInterval
HTML:
<div class="display-left">
<ul class="img-gather">
<li class="p5"><img src="image/1.png" alt=""></li>
<li class="p4"><img src="image/2.png" alt=""></li>
<li class="p3"><img src="image/3.png" alt=""></li>
<li class="p2"><img src="image/4.png" alt=""></li>
<li class="p1"><img src="image/5.png" alt=""></li>
</ul>
<div class="arr">
<img src="image/ljt.png" class="prev" alt="上一张">
<img src="image/rjt.png" class="next" alt="下一张">
</div>
</div>
CSS:
body{
background-color: #aaa;
}
.display-left{
position: relative;
display: inline-block;
vertical-align: top;
width: 794px;
height: 404px;
margin-left: 348px;
margin-top: 93px;
margin-bottom: 74px;
}
.display-left>img{
width: 17px;
height: 32px;
}
.img-gather>li{
float: left;
}
.display-left .arr img:nth-child(1){
position: absolute;
top: 186px;
left: 0;
}
.display-left .arr img:nth-child(2){
position: absolute;
top: 186px;
right: 0;
}
.img-gather{
display: inline-block;
width: 620px;
height: 100%;
margin-left: 74px;
margin-right: 66px;
list-style: none;
}
.img-gather .p5>img{
width: 196px;
height: 404px;
position: absolute;
z-index: 100;
top: 0;
left: 91px;
}
.img-gather .p4>img{
width: 181px;
height: 371px;
position: absolute;
z-index: 90;
top: 16px;
left: 240px;
}
.img-gather .p3>img{
width: 161px;
height: 337px;
position: absolute;
z-index: 80;
top: 33px;
left: 372px;
}
.img-gather .p2>img{
width: 120px;
height: 306px;
position: absolute;
z-index: 70;
top: 49px;
left: 507px;
}
.img-gather .p1>img{
width: 131px;
height: 280px;
position: absolute;
z-index: 60;
top: 62px;
left: 580px;
}
JS:
var cArr = ["p5","p4","p3","p2","p1"];
var index = 0;
$(".next").click(function () {
nextImg();
});
$(".prev").click(function () {
prevImg();
});
function nextImg() {
cArr.unshift(cArr[4]); // 向开头添加p1,unshift返回新的数组长度
cArr.pop(); // 把最后的p1删掉，最终数组是【p1,p5,p4,p3,p2】
$(".img-gather li").each(function (i, e) {
$(e).removeClass().addClass(cArr[i]);
})
index++;
if (index>4){
index = 0;
}
// show();
}
function prevImg() {
cArr.push(cArr[0]); // 向数组末尾添加p5
cArr.shift(); // 把开头的p5删掉，最终数组是【p4,p3,p2,p1,p5】
$(".img-gather li").each(function (i, e) {
$(e).removeClass().addClass(cArr[i]);
})
index--;
if(index<0){
index = 4;
}
// show();
}
// 点击图片能切换的功能
// 点击class为p3的图片
$(document).on("click",".p3",function(){
nextImg();
});
// 点击class为p5的图片
$(document).on("click",".p5",function(){
prevImg();
});
// 自动播放功能
// 鼠标移入box时清除定时器
$(".content").mouseover(function(){
clearInterval(timer);
})
// 鼠标移出box时开始定时器
$(".content").mouseleave(function(){
timer=setInterval(nextImg,2000);
})
// 进入页面自动开始定时器
timer=setInterval(nextImg,2000);
