[Jquery]焦点图轮播效果

$(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);
    });
});

 

和js的区别：用.animate()方法代替js里要算的速度，每次滑行距离以及定时器setTimeout