码迷,mamicode.com
首页 > 其他好文 > 详细

jq animate动画 自制slider

时间:2016-05-19 17:47:33      阅读:145      评论:0      收藏:0      [点我收藏+]

标签:

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);

  

jq animate动画 自制slider

标签:

原文地址:http://www.cnblogs.com/forgere/p/5509483.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!