var i=0;
var first=$(".img li").first().clone();
$(".img").append(first);
//点左边按钮
$(".move li:nth-of-type(1)").click(function(){
i++;
if(i==5){
$(".img").css({left:'0px'});
i=1;
}
$(".img").animate({left:-i*920+'px'});
if(i==4){
$(".num li").eq(0).addClass('on').siblings().removeClass('on');
}else{
$(".num li").eq(i).addClass('on').siblings().removeClass('on');
}
});
//点右边按钮
$(".move li:nth-of-type(2)").click(function(){
i--;
if(i==-1){
$(".img").css({left:-4*920+'px'});
i=3;
}
$(".img").animate({left:-i*920+'px'});
$(".num li").eq(i).addClass('on').siblings().removeClass('on');
});
//自动轮播
var timer=setInterval(function(){
i++;
if(i==5){
$(".img").css({left:'0px'});
i=1;
}
$(".img").animate({left:-i*920+'px'});
if(i==4){
$(".num li").eq(0).addClass('on').siblings().removeClass('on');
}else{
$(".num li").eq(i).addClass('on').siblings().removeClass('on');
}
},2000);
//鼠标划上事件
$(".screen").mouseover(function(){
clearInterval(timer);
});
$(".screen").mouseout(function(){
setInterval(timer);
});
//点击事件
$(".num li").mouseover(function(){
var index=$(this).index();
i=$(this).index
$(".img").animate({left:-i*920+'px'});
$(".num li").eq(i).addClass('on').siblings().removeClass('on');
})
*{margin: 0px; padding: 0px;list-style: none}
.screen{width: 920px;height: 620px;margin: 50px auto 0px;overflow: hidden; position: relative}
.screen:hover .move{display: block;}
.img{width: 500%;position: absolute; left: 0px}
.img li{float: left;}
.num{position: absolute;bottom: 10px;width: 120px; height: 15px;text-align: center;}
.num li{width: 15px;height: 15px;display: inline-block;border-radius: 50px; background-color: orange;}
.num li.on{background-color: lightgreen;}
.move{width: 30px;height: 50px;line-height: 50px;display: none;}
.move li{width: 30px;height: 50px;font-size: 30px;color: #fff;background: rgba(0,0,0,.6);position: absolute;top: 40%;text-align: center}
.move li:nth-of-type(2){right: 0px;}
- <
- >