84669 personnes étudient
152542 personnes étudient
20005 personnes étudient
5487 personnes étudient
7821 personnes étudient
359900 personnes étudient
3350 personnes étudient
180660 personnes étudient
48569 personnes étudient
18603 personnes étudient
40936 personnes étudient
1549 personnes étudient
1183 personnes étudient
32909 personnes étudient
尝试仿照哔哩哔哩yoo效果做一个轮播图,表现如下:
![图片上传中...]
滑动效果使用transform:translate3d(-n*1000px,0px,0px)完成,左右按钮实现上一张/下一张。问题是动画时间为500ms,如何在这500ms内不响应按钮上一张/下一张事件?
走同样的路,发现不同的人生
点击的时候 ,禁掉上一张下一张按钮的事件,定时五百毫秒后恢复按钮的事件。
搞个class或者标志位呗……
函数节流http://www.alloyteam.com/2012/11/javascript-throttle/
设置一个flag,未运动时,flag=true,运动时,flag=false
xxx.click(function() { if(flag) { // 执行运动,并将flag的值设置为false flag = false; ... } }) // 运动结束之后,将flag的值修改为true xxx.on('transitionend', function() { flag = true; ... })
至于如何判断运动已经结束,需要看你的运动方式是如何实现的,如果你通过js改变translate的值,那么需要通过回调函数来实现,只需要在你自定义的运动函数最末位添加一个回调即可
function animate(xx, xxxx, xxxxx, callback) { // 你的运动逻辑 .... callback && callback() }
如果你是通过css,修改className的方式来实现,那么就可以直接通过animationend与transitionend来实现,这2个事件分别在css的animation与transition运动结束后触发
animationend
transitionend
点击的时候 ,禁掉上一张下一张按钮的事件,定时五百毫秒后恢复按钮的事件。
搞个class或者标志位呗……
函数节流
http://www.alloyteam.com/2012/11/javascript-throttle/
设置一个flag,未运动时,flag=true,运动时,flag=false
至于如何判断运动已经结束,需要看你的运动方式是如何实现的,如果你通过js改变translate的值,那么需要通过回调函数来实现,只需要在你自定义的运动函数最末位添加一个回调即可
如果你是通过css,修改className的方式来实现,那么就可以直接通过
animationend
与transitionend
来实现,这2个事件分别在css的animation与transition运动结束后触发