您的位置:首页 > 其它

jq animate动画 自制slider

2016-05-19 17:33 337 查看
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);


  
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: