用jQuery实现优酷首页轮播图(2)

// 点击左箭头 $oLeft.click(function(){ if(canClick){ clearInterval(timer); canClick = false; var index = nowPic - 1; if(index < 0){ index = 4; }else if(index > 4){ index = 0; } $pic.eq(index).css('left',-$picW); $pic.eq(nowPic).animate({left:$picW}, 400); $pic.eq(index).animate({left:0}, 400,function(){ canClick = true; timer = setInterval(function(){ auto(); },3000); }); nowPic = index; // 设置当前图片的圆点的样式 $cir.eq(nowPic).attr('id','active').siblings().attr('id',''); } })

// 点击右箭头 $oRight.click(function(){ if(canClick){ clearInterval(timer); canClick = false; var index = nowPic + 1; if(index < 0){ index = 4; }else if(index > 4){ index = 0; } $pic.eq(index).css('left',$picW); $pic.eq(nowPic).animate({left:-$picW}, 400); $pic.eq(index).animate({left:0}, 400,function(){ canClick = true; timer = setInterval(function(){ auto(); },3000); }); nowPic = index; // 设置当前图片的圆点的样式 $cir.eq(nowPic).attr('id','active').siblings().attr('id',''); } })

总结

这个效果实现起来很简单，就是刚开始没有想到实现的思路。