javascript - JS原生轮播图,有个思维不懂。写过的解释下
迷茫
迷茫 2017-04-10 15:50:35
[JavaScript讨论组]



    
    焦点轮播图
    
    



1 1 2 3 4 5 5

迷茫
迷茫

业精于勤,荒于嬉;行成于思,毁于随。

全部回复(4)
大家讲道理

首先,解释下轮播图的原理吧~
其实主要利用 #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) < left
speed < 0 说明图片向左滑动,#list 的 left属性值要变小(距离变长,但是是负数,所以变小),所以是 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之后继续播放

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号