jquery实现图片轮播

利用jquery实现两种轮播效果
轮播一：

<script src="jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function(e) {
     var timer = setInterval(change,2000); //定时器，每2s轮播一次
     var imgs=$("#slide li");              //图片的数组
     var length=imgs.length;              //图片数组的长度
     var index=0;                         //图片索引
     var icons=$("#icons li");   
     var arrows=$("[name='arrow']");       //左右指向标
     var box=$("#box"); 

      imgs.hide();                         
      imgs.eq(index).show();                   //只显示第一张图片
      icons.eq(index).addClass("active");      //激活当前图标
     //对数字标签添加事件
      icons.click(function(){
           index = $(this).index();            //获得索引
           update();
           clearInterval(timer);
           timer=setInterval(change,2000);      //重启定时器
         });

      imgs.mouseover(function(){
           clearInterval(timer);
         }).mouseout(function(){
           timer=setInterval(change,2000);
         });
      box.mouseenter(function(){
         arrows.show();
         }).mouseleave(function(){
         arrows.hide();
     }); 

     arrows.click(function(){
         if($(this).attr("id")=="left"){
              index--;
             }else{
                 index++;
             }

             if(index<0){
                 index=length-1;
             }
             if(index>length-1){
                 index=0;    
             }
           update();
           clearInterval(timer);
           timer=setInterval(change,2000);
         });
     function change(){
           index++;
           if(index==length)
             index=0;
           update();
      }
     function update(){
           imgs.fadeOut(500);
           imgs.eq(index).fadeIn(500);
           icons.removeClass("active");
           icons.eq(index).addClass("active");
         }
  });
</script>

轮播二：

<script src="jquery.js" type="text/javascript"></script>
<script>
 $(document).ready(function(e) {
     var timer = setInterval(changeRight,2000);
     var index=0;
     var box=$("#box"); 
     var icons=$("#icons li");
     var imgs=$("#slide li");
     var len=imgs.length;   
     var arrows=$("[name='arrow']");
     icons.eq(index).addClass("active");      //激活当前图

     icons.click(function(){
           index = $(this).index()+1;            //获得索引
           clearInterval(timer);
           changeLeft();      //重启定时器
         });

     box.mouseenter(function(){
         arrows.show();
         }).mouseleave(function(){

         arrows.hide();
     }); 
        imgs.mouseover(function(){
           clearInterval(timer);
         }).mouseout(function(){
           timer=setInterval(changeRight,2000);
         });

     arrows.click(function(){
              clearInterval(timer);
             if($(this).attr("id")=="left"){
              changeLeft();
             }else{
              changeRight();
             }
         });

        function changeLeft(){
            if(index==0){
            $("#slide").css("left",-2500);
            index=length-1;
            icons.eq(index).addClass("active"); 
        }else{
          index--;  
        }
        $("#slide").animate({"left":-500*index},500);
           icons.removeClass("active");
           icons.eq(index).addClass("active");

        }

        function changeRight(){
        if(index==length){
            $("#slide").css("left",0);
            index=1;
            icons.eq(index).addClass("active"); 
        }else{
            index++;
            }

        $("#slide").animate({"left":-500*index},500);
           icons.removeClass("active");
           if(index==length)
           icons.eq(0).addClass("active");
           else
           icons.eq(index).addClass("active");
        }
});
</script>