jq animate动画 自制slider

jq的 animate的动画重复执行 导致浏览器卡死。

在animate()前加stop() 即可。

(function($){
    var silde = {
        init:function(a,number,gundong,status){
            this.auto(a,number,gundong,status);
        },
        auto:function(a,number,gundong,status){
            var _root = this,
                $ul = $(a).find("ul"),
                $lis = $ul.children("li"),
                width = $lis.eq(0).width(),
                numberaccout = number || 4,
                gundongaccout = gundong || 1,
                auto_status = status || true,
                mf=parseInt($ul.css('margin-left'));
            $(a).css({'width':width*numberaccout});
                if(auto_status){
                    timemachine=setInterval(function(){
                        if(-mf<($lis.length-numberaccout)*width){
                            mf = mf - width;
                        }else{
                            mf = 0;
                        }
                        $ul.stop().animate({
                                'margin-left': mf +'px'
                            },
                            'slow');
                        },3000
                    );
                }
            // 接触时暂停
            $('.slider').hover(function(){
                window.clearInterval(timemachine);
            });
            // 鼠标移开
            $('.slider').mouseleave(function(){
                silde.init(a,number,gundong,auto_status);
            });
            $('.arrow-right').click(function(){
                if(-mf>($lis.length-numberaccout-1)*width){
                    return;
                }
                mf -= width;
                $ul.stop().animate({
                        'margin-left':mf +'px'
                    },
                    'fast');
                });
            $('.arrow-left').click(function(){
                if(mf === 0){
                    return;
                }
                mf += width;
                $ul.stop().animate({
                        'margin-left':mf +'px'
                    },
                    'fast');
                }
            );
        }
    };
    $(function(){
        silde.init('.slider',3,1,true);
    });
})(jQuery);

  

posted @ 2016-05-19 17:33  forgere  阅读(335)  评论(0编辑  收藏  举报