例子---JS无缝轮播图

最新推荐文章于 2022-11-05 16:33:29 发布

TimePawnshop.

最新推荐文章于 2022-11-05 16:33:29 发布

阅读量782

点赞数

分类专栏： JaveScript小例子文章标签：无缝轮播 JS

本文链接：https://blog.csdn.net/MYTLJP/article/details/78417522

版权

JaveScript小例子专栏收录该内容

15 篇文章 1 订阅

订阅专栏

DuangDuang，今天我们来一起说说JS实现无缝轮播。没错，顾名思义，就是我们脑子中浮现的类似淘宝主页面中间部分的那个滚动图。这个轮播图的使用频率还是很大的，所以还是很有必要好好研究一下的。
哈哈，按照惯例我们先来说一下它的实现原理吧。
第一步，
需要在body中创建3层div，第一层是显示给大家看的那个wrap，第二个是包含所有div图片的box，第三个就是每个图片的item（我们这个用颜色区分每页，就不添加图片了）；另外还要在box同级上，添加上一个、下一个按钮，也需要加下面那几个小点点（通俗的说，就是图片跳到第几张，对应的小点点改变样式的那堆），OK，上结构代码~

<body>
        <div class="wrap">
            //这里需要解释一下，前后各多加一个原因是为了造成假象，然后再让位置瞬间跳到对应的位置
            <div class="box">
                <div class="item5 item">子</div>
                <div class="item1 item">码</div>
                <div class="item2 item">丫</div>
                <div class="item3 item">头</div>
                <div class="item4 item">萍</div>
                <div class="item5 item">子</div>
                <div class="item1 item">码</div>
            </div>
            //这里标签里的onclick是点击的行间使用，引号里面的pre()和next()就是JS代码中封装的上一个下一个函数
            <div class="pre" onclick="pre()"><</div>
            <div class="next" onclick="next()">></div>
            <div class="dian">
                <div class="div">1</div>
                <div class="div">2</div>
                <div class="div">3</div>
                <div class="div">4</div>
                <div class="div">5</div>
            </div>
        </div>
    </body>

前后各加一张的效果图如下：
这里写图片描述

第二步,
在写JS代码的时候，需要的注意的有两点：
1️⃣ 无论box需要移动多少距离，都需要让使用的时间一样，所以我们在用定时器去移动的时候，需要把它的距离按比例去运算，让20毫秒一次的定时器移动所有需要移动的距离的十分之一，定时器执行十次，全部移动完毕，来保证无论距离多少所花费的时间是一样的；
2️⃣ 当移动到加在最后面的第一页的时候，如果还想继续往后移，说明接下来想看到的那张是第二张，所以当index为想要显现的那张的index的时候，需要让index等于想要看到的位置的index，把box的left值也改到这里

        //代表当前看到的是第几张,方便计算box的偏移量（index*(-500)）
        var index = 1;
        var moveTimer;
        //下一张
        function next(){    
            index++;
            //index等于7的时候是想到第二张的位置
            if(index == 7){
                index=2;
                box.style.left = "-500px";//瞬间移动到前面的第一张的位置
            }
            //调用根据自定义变量index移动的函数
            moveByIndex();
        }
        function moveByIndex(){
            //要移动的总距离
            var l = index*(-500)-box.offsetLeft;
            var count = 0;
            clearInterval(moveTimer);//为了不让执行的定时器越来越多
            moveTimer = setInterval(function(){
                count++;
                //目的是无论移动多少距离，所用的时间相同，都是20毫秒的定时器执行十次
                box.style.left = box.offsetLeft + l/10 + "px";
                //保证定时器执行十次
                if(count>=10){
                    clearInterval(moveTimer);
                    box.style.left = index*(-500) + "px";
                }
            },20);
        }