html自动轮播计时器不准,自己做的jQuery轮播图,大家帮忙看一下,能自动轮播,定时器,点击按钮不起用...

无缝滚动

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;}

  • 1fff6db2b2.jpg
  • 2e4c8b8b54.jpg
  • 36d3d58bbd.jpg
  • 8faa824035.jpg
  • <
  • >
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值