扫码关注官方订阅号
焦点轮播图 < >
业精于勤,荒于嬉;行成于思,毁于随。
function animate(offset) { if (offset == 0) { return; } animated = true; var time = 300; var inteval = 10; var speed = offset / (time / inteval); // left 保存了移动到下一张图之后的位置 var left = parseInt(list.style.left) + offset; // 先决条件 // 首先,前提是图片(展区)宽度为 600px,然后下面的算法基于这个宽度的 // 其次,第1张图和最后一张图是一样的,这样才会避免跳动(如果不一样你自己看看效果就晓得了 var go = function() { // speed 是根据 offset 的正负来决定的正负,正负决定了其方向,负为向左 // 这两个判断是用来判断是否移动到位的 // 以 speed > 0 为例 // 1: parseInt(list.style.left) // 2: left // [ images] --------|--------|-------------------- // [ time 1] 1 2 // [ time 2] 1 2 // [ time 3] 1 2 // [ time 4] 1 2 // [ done] 1 if ((speed > 0 && parseInt(list.style.left) < left) || (speed < 0 && parseInt(list.style.left) > left)) { list.style.left = parseInt(list.style.left) + speed + 'px'; // 没到位就继续滚 setTimeout(go, inteval); } else { // 到位了就先把它定下来(万一有点小偏差啥的,修正一下 list.style.left = left + 'px'; // 左边没图了,切到最右图 if (left > -200) { list.style.left = -600 * len + 'px'; } // 右边没图了,切到最左图 if (left < (-600 * len)) { list.style.left = '-600px'; } animated = false; } } go(); }
楼主,你这是遇到什么问题了???
还没播放完也就是还没移动到最终位置时,使用setTimeout,使其在inteval也就是10ms之后继续播放
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
楼主,你这是遇到什么问题了???
还没播放完也就是还没移动到最终位置时,使用setTimeout,使其在inteval也就是10ms之后继续播放