jQuery动画效果图片轮播特效

所以此刻修改一点代码，在代码的开头追加第一张图片

/*克隆轮播的第一个li追加到最后*/
$("#container #content li").first().clone().appendTo($("#container #content"));

在rightBtnClick代码中，将nowImage == totalCount – 1 修改为 nowImage == totalCount – 2。
2> 切换上一张(点击左边按钮)

代码与点击右边按钮类似

$("#container #btn #leftBtn").click(function(){
 if(!$("#container #content").is(":animated")){
  if(nowImage == 0){
   nowImage = totalCount - 2;
   $("#container #content").css("left",-560 * (totalCount - 1)); 
   $("#container #indicator li").eq(nowImage).addClass("current").siblings().removeClass("current"); 
   $("#container #content").animate({"left": -560 * nowImage}, 1000);
  } else {
   nowImage--;
   changeImage();
  }
 }
});

3> 点击指示器按钮进行图片切换
它的设计思路，就是获取图片的索引，然后调用changeImage函数就可以了。

$("#container #indicator li").click(function(){
 nowImage = $(this).index();
 changeImage();
});

4> 添加定时执行动画的功能
也就是定时的调用点击右边按钮的代码；添加如下代码:

var timer = setInterval(rightBtnClick, 2000); 

5> 鼠标悬停在图片上，停止滚动；鼠标离开图片后，继续滚动
也就是对定时器进行开启和关闭；添加如下代码:

$("#container").mouseenter(function(){
 clearInterval(timer);
}).mouseleave(function(){
 timer = setInterval(rightBtnClick, 2000);
}); 

精彩专题分享：jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

至此，一个传统轮播的效果就实现了，希望大家可以学以致用。