自己用JQuery写了一个海报轮播图特效,核心代码如下:
(注:共七张轮播图,首尾衔接一张,其余五张为有效图。index取值为-1~5。其中0~4为有效图)
原理是设置一个index标记,根据当前index改变div的偏移位置
但是假设轮播图转换动画为5s,则在5s内快速点击“下一页”四次,则动画共耗时20s,图片去到第四张
如何设置在5s内快速点击“下一页”四次,但只耗时5s,图片去到第二张?即,动画未完成则只接受一次事件
//================上一页
function toPrev(){
index--;
if(index==-1){
index=4;
index_point.eq(index).addClass("on").siblings().removeClass();
list.animate({left:"0"},1000,function(){list.css("left","-500%")});
return 0;
}
index_point.eq(index).addClass("on").siblings().removeClass();
location = index_point.eq(index).attr("index")*(-100)+"%";
list.animate({left:location},1000);
console.log(index +" "+ list.css("left"));
}
//================下一页
function toNext(){
index++;
if(index==5){
index=0;
index_point.eq(index).addClass("on").siblings().removeClass();
list.animate({left:"-600%"},1000,function(){list.css("left","-100%")});
return 0;
}
index_point.eq(index).addClass("on").siblings().removeClass();
location = index_point.eq(index).attr("index")*(-100)+"%";
list.animate({left:location},1000);
console.log(index +" "+ list.css("left"));
}
//===============点击小箭头翻页
prev.bind("click",toPrev);
next.bind("click",toNext);
1. if($(element).is(":animated")){ //判断元素是否正处于动画状态
//如果当前没有进行动画,则添加新动画
}
2.var flag = true;
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。