jQuery动画效果图片轮播特效

代码中 #indicator li 设置的background的图片就是上图中空心的小圆圈，而 #indicator li.current 设置的background的图片就是上图中实心的大圆圈。所以刚开始的时候，默认选中第一个。
3. 用JQuery添加交互效果

1> 切换下一张(点击右边按钮)

$(function(){ 
 // 总的图片个数(用代码获取个数，扩展性比较强)
 var totalCount = $("#container #content li").length;
 // 当前处于第几个图片
 var nowImage = 0;
 $("#container #btn #rightBtn").click(rightBtnClick);
<span style="white-space:pre"> </span>function rightBtnClick(){
  if(!$("#container #content").is(":animated")){
   if(nowImage == totalCount - 1){
   <span style="white-space:pre"> </span>nowImage = 0;
<span style="white-space:pre">    </span>$("#container #indicator li").eq(nowImage).addClass("current").siblings().removeClass("current");
<span style="white-space:pre">    </span>$("#container #content").animate({"left": -560 * (totalCount -1 )}, 1000, function(){
    $("#container #content").css("left",0);
   });
  } else {
   nowImage++;
   changeImage();
  }
 }
}
});

changeImage 函数

function changeImage(){
 if(!$("#container #content").is(":animated")){
 <span style="white-space:pre"> </span>$("#container #content").animate({"left": -560 * nowImage}, 1000);
  $("#container #indicator li").eq(nowImage).addClass("current").siblings().removeClass("current");
 }
}

代码中，当DOM元素加载完毕，就执行了$(‘#container #btn #rightBtn’).click(rightClick), 也就是立刻执行了切换图片操作。在rightBtnClick函数中，先进行了content是否正在进行动画的判断，这样做的目的：防止动画在执行的过程，用户又进行强制的执行其他动画，会产生干扰，最终导致动画效果混乱。

如果有的话，则将标志变量nowImage指向下一个图片，并且执行changeImage函数中的代码：1. 将content中的所有图片左移一个图片大小的宽度；2.将指示器的图片也移动到对应的位置。

如果没有的话，并且图片现在是显示到了最后一个，则先执行动画，执行完毕后，立刻将content中所有的图片内容拉回到第一个，但是这里任然会穿帮，因为当前图片显示为最后一个后，你继续执行动画，是没有任何效果的，所以在这个动画执行期间是没有任何反应的，当动画时间执行完毕后，会突然在界面上出现第一个图片。

设计思想：为了解决这个问题，解决方案就是在这些图片之后追加一个与第一张相同的图片；这就是传统轮播的主要设计思想。所以当图片滚动到倒数第二章的时候；首先执行滚动动画，也就是滚动到预先准备的与第一张一模一样的图片，看起来似乎是滚动到了第一张，其实不然。在动画执行完毕后，立刻将content中所有的图片拉回到第一张。流程图如下：