原生js实现无缝轮播

Posted 2021-01-24 yancyzheng

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生js实现无缝轮播相关的知识，希望对你有一定的参考价值。

原生js实现无缝轮播

　　因为要做到无缝，所以就要把第一张图片和最后一张连接起来，在此处采用js克隆了第一张图片的节点，添加到最后，显示图片序号的小圆按钮也是使用js动态添加的。

html部分

    <div class="banner" id="banner">
        <ul class="pic" id="pic">
            <li><a href="javascript:void(0)"><img src="images/1.jpg"></a></li>
            <li><a href="javascript:void(0)"><img src="images/2.png"></a></li>
            <li><a href="javascript:void(0)"><img src="images/3.png"></a></li>
            <li><a href="javascript:void(0)"><img src="images/4.png"></a></li>
            <li><a href="javascript:void(0)"><img src="images/5.jpg"></a></li>
            <li><a href="javascript:void(0)"><img src="images/6.png"></a></li>
            <li><a href="javascript:void(0)"><img src="images/7.png"></a></li>
        </ul>
        <ul class="dot" id="dot"></ul>
        <button class="left" id="leftBtn">&lt;</button>
        <button class="right" id="rightBtn">&gt;</button>
    </div>

css部分

       * {
            padding: 0;
            margin: 0;
        }
        .banner {
            width: 1000px;
            height: 600px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
        }
        ul, li {
            list-style: none;
        }
        .pic {
            height: 600px;
            position: absolute;
            left: 0;
            top: 0;
        }
        .pic li {
            float: left;
        }
        .pic li img {
            width: 1000px;
            height: 600px;
        }
        .dot {
            width: 100%;
            text-align: center;
            font-size: 0;
            position: absolute;
            bottom: 40px;
            left: 0;
        }
        .dot li {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #fff;
            margin: 0 5px;
            cursor: pointer;
        }
        .banner button {
            width: 30px;
            height: 50px;
            background-color: rgba(0, 0, 0, .5);
            border: 0 none;
            color: #fff;
            opacity: .5;
            position: absolute;
            top: 45%;
            cursor: pointer;
            font-size: 24px;
        }
        .left {
            left: 0;
        }
        .right {
            right: 0;
        }

js部分
js中有封装的一些方法，包括查看对象属性的兼容写法，动画函数（该方法实现了height,width,left,top,opacity等属性的动画效果），和通过事件冒泡找寻节点的函数；

        var leftBtn = document.getElementById("leftBtn");
        var rightBtn = document.getElementById("rightBtn");
        var banner = document.getElementById("banner");
        var pic = document.getElementById("pic");
        var dot = document.getElementById("dot");
        for (var i = 0; i < pic.children.length; i++) {
            var node = document.createElement("LI");
            node.index = i;
            dot.appendChild(node);
        }
        var copy = pic.children[0].cloneNode(true);
        pic.appendChild(copy);
        var width = parseInt(getStyle(pic.children[0], "width"));
        var len = pic.children.length;
        pic.style.width = width * len + "px";
        var index = 0;
        var t;
        function move() {
            if(index == len) {
                pic.style.left = 0;
                index = 1;
            }
            if (index == -1) {
                pic.style.left = -(len - 1) * width + "px";
                index = len - 2;
            }
            left = -width * index;
            changeDots(index);
            animate(pic, {left, left}, function() {
                t = setTimeout(function () {
                    index++;
                    if (index == len) {
                        pic.style.left = 0;
                        index = 1;
                    }
                    move();
                }, 2000);
            });
        }
        move();
        // 为按钮添加点击事件
        dot.onclick = function(e) {
            e = e || window.event;
            var target = e.target || e.srcElement;
            target = getTarget(target, "tagName", "LI", this);
            if (target) {
                clearTimeout(t);
                index = target.index;
                changeDots(index);
                move();
            }
        }
        // 左右按钮
        leftBtn.onclick = function() {
            clearTimeout(t);
            index--;
            move();
        }
        rightBtn.onclick = function() {
            clearTimeout(t);
            index++;
            move();
        }
        // 改变按钮颜色
        function changeDots(index) {
            if (index < 0) {
                index = len;
            }
            if (index == len - 1) {
                index = 0;
            }
            for (var i = 0; i < len - 1; i++) {
                dot.children[i].style.backgroundColor = "#fff";
            }
            dot.children[index].style.backgroundColor = "red";
        }
        /**
         * 查看ele对象的type属性
         * @param {元素对象} ele 
         * @param {属性} type 
         */
        function getStyle(ele, type) {
            if (ele.currentStyle) {
                return ele.currentStyle[type];
            } else {
                return getComputedStyle(ele, null)[type];
            }
        }
        /**
         * 动画效果
         * @param {元素对象} el 
         * @param {结束条件} endObj 
         * @param {回调函数} cb 
         * @param {时间} time 
         */
        function animate(el, endObj, cb, time) {
            time = time || 200;
            var startObj = {};
            var _startObj = {};
            var speedObj = {};
            for (var i in endObj) {
                startObj[i] = parseInt(getStyle(el, i));
                _startObj[i] = startObj[i];
                speedObj[i] = 16.7 * (endObj[i] - startObj[i]) / time;
            }
            var flag = false;
            clearInterval(el.t);
            el.t = setInterval(function() {
                for (var j in endObj) {
                    startObj[j] += speedObj[j];
                    if (_startObj[j] < endObj[j] ? startObj[j] >= endObj[j] : startObj[j] <= endObj[j]) {
                        startObj[j] = endObj[j];
                        clearInterval(el.t);
                        flag = true;
                    }
                    if (j == "opacity") {
                        el.style[j] = startObj[j];
                    } else {
                        el.style[j] = startObj[j] + "px";
                    }
                }
                if (flag && cb) {
                    cb();
                }
            }, 16.7);
        }
        /**
         * 找到attr属性为value的节点
         * @param {目标对象，鼠标点击对象} target 
         * @param {属性名} attr 
         * @param {属性值} value 
         * @param {结束条件} end 
         */
        function getTarget(target, attr, value, end) {
            while (target != end) { //如果鼠标点击的是end，则直接结束
                if (target[attr] == value) { //如果点击的对象的attr属性值为value，则返回该对象
                    return target;
                }
                target = target.parentNode; //否则查找其父节点
            }
        }

以上是关于原生js实现无缝轮播的主要内容，如果未能解决你的问题，请参考以下文章

js原生选项（自动播放无缝滚动轮播图）二

原生JS实现轮播

自动点击切换按钮切换轮播无缝选项卡 ----原生js

原生JavaScript实现的图片轮播左右滑动效果函数封装

JS 轮播图（无缝连接的轮播图实现，含代码供参考）

js原生选项卡（包含移动端无缝选项卡）三