扫码关注官方订阅号
焦点轮播图 < >
业精于勤,荒于嬉;行成于思,毁于随。
首先,解释下轮播图的原理吧~其实主要利用 #container 的overflow:hidden 和 #list 的 position:absolute,在 #list 没有设置 left 值时,布局是这样的,当然只显示 #container 部分,原谅我画图技术不佳……
overflow:hidden
position:absolute
left
#list 设置了 left值时,就会显示不同的图片,left为负的,轮播图的图片是向左滑动的,给出代码属于这种情况,见下图,left设置正的值,则图片向右滑动。而代码中传递的参数offset也是 图片向左滑动时,offset<0;图片向右滑动时,offset>0
go 函数里面的判断:speed 根据 offset 计算出来的,函数中的变量 left 是#list最终要设置的left值speed > 0 说明图片向右滑动,#list 的 left属性值要变大,所以判断条件是 parseInt(list.style.left) < leftspeed < 0 说明图片向左滑动,#list 的 left属性值要变小(距离变长,但是是负数,所以变小),所以是 parseInt(list.style.left) > left
speed > 0
parseInt(list.style.left) < left
speed < 0
parseInt(list.style.left) > left
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-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
首先,解释下轮播图的原理吧~

其实主要利用 #container 的
overflow:hidden和 #list 的position:absolute,在 #list 没有设置left值时,布局是这样的,当然只显示 #container 部分,原谅我画图技术不佳……#list 设置了
left值时,就会显示不同的图片,left为负的,轮播图的图片是向左滑动的,给出代码属于这种情况,见下图,left设置正的值,则图片向右滑动。而代码中传递的参数offset也是 图片向左滑动时,offset<0;图片向右滑动时,offset>0
go 函数里面的判断:
speed 根据 offset 计算出来的,函数中的变量 left 是#list最终要设置的left值
speed > 0说明图片向右滑动,#list 的left属性值要变大,所以判断条件是parseInt(list.style.left) < leftspeed < 0说明图片向左滑动,#list 的left属性值要变小(距离变长,但是是负数,所以变小),所以是parseInt(list.style.left) > left楼主,你这是遇到什么问题了???
还没播放完也就是还没移动到最终位置时,使用setTimeout,使其在inteval也就是10ms之后继续播放