[Jquery]焦点图轮播效果

浏览数：22 / 时间：2015年06月09日

$(function(){
   var $next=$(".right");
   var $prev=$(".left");
   var $list_num=$(".list-num a");
   var $banner=$(".banner");
   var $list_banner=$(".list-banner");
   var index=1;
   var timer;
   var $list_img_f=$(".list-banner li:first");
   var $list_img_l=$(".list-banner li:last");
   $list_img_f.clone(true).appendTo($list_banner);
   $list_img_l.clone(true).prependTo($list_banner);

   function showDot($obj){
       $obj.addClass("hover").siblings().removeClass("hover");
   }

   function startMove(i){
       $list_banner.stop().animate({left:-i*624},300,function(){
           if(i<1){
               showDot($list_num.eq(3));
           }
           else if(i>4){
               showDot($list_num.eq(0));
           }
           else{
               showDot($list_num.eq(i-1));
           }
           if(i<1){
               $list_banner.css("left",-2496);
               index=4;
           }
           else if(i>4){
               $list_banner.css("left",-624);
               index=1;
           }
       });

   }
   function autoPlay(){
       timer=setInterval(function(){
           $next.click();
       },2000);
   }
   autoPlay();
   $next.click(function(){
       if(!$list_banner.is(":animated")){           //如果先index++再执行startMove(index);会有点问题，点的快某个点会跳过
           startMove(++index);
       }
   });
   $prev.click(function(){
       if(!$list_banner.is(":animated")){
           startMove(--index);
       }
   });
   $list_num.click(function(){
       var i=$(this).index()+1;
       index=i;
       startMove(i);
   });
});