js实现轮播图效果

网上找了找轮播图的实现方法，自己照着写了写，主要做效果，样式没有特意调

animate() 封装成了一个函数，方便以后调用，还可以自己加回调函数

function animate(obj, target) {

    clearInterval(obj.timer);

    obj.timer = setInterval(function () {
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            clearInterval(obj.timer);
        }
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 15);

}

• html代码

<div class="box">
        <a class="left" href="#">←</a>
        <a class="right" href="#">→</a>
        <ul>
            <li><img src="" alt=""></li>
            <li><img src="" alt=""></li>
            <li><img src="" alt=""></li>
            <!-- 这里写图片路径 -->

        </ul>
        <ol>

        </ol>
    </div>

• css代码

        <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            display: flex;
        }

        .box {
            position: relative;
            width: 500px;
            height: 300px;
            margin: auto;
            overflow: hidden;

        }

        .box a {
            display: inline-block;
            width: 50px;
            height: 50px;
            background-color: gray;
            border-radius: 50%;
            text-align: center;
            font-size: 30px;
            line-height: 50px;
            color: white;
            text-decoration: none;
            z-index: 10;
        }

        .left {
            display: none;
            position: absolute;
            top: 125px;
            left: 20px;
        }

        .right {
            display: none;
            position: absolute;
            top: 125px;
            left: 430px;
        }

        ul {
            position: relative;
            left: 0;
            top: 0;
            width: 400%;
            list-style: none;
        }

        img {
            width: 500px;
            height: 300px;
        }

        ul li {
            float: left;
        }

        ol {
            position: absolute;
            top: 270px;
            left: 170px;
            display: inline-block;
            width: 200px;
            height: 10px;
            list-style: none;

        }

        ol li {
            display: inline-block;
            width: 10px;
            height: 10px;
            background-color: grey;
            border-radius: 50%;
            margin-left: 30px;
        }

        ol .current {
            background-color: white;
        }
    </style>

• js代码

    别忘了引用animate()
  

    <script>
        var box = document.querySelector('.box');
        var left = document.querySelector('.left');
        var right = document.querySelector('.right');
        var boxWidth = box.offsetWidth;

        // 鼠标悬停显示左右按键
        box.addEventListener('mouseenter', function () {
            left.style.display = 'inline-block';
            right.style.display = 'inline-block';
            clearInterval(timer);
        });

        box.addEventListener('mouseleave', function () {
            left.style.display = 'none';
            right.style.display = 'none';
            timer = setInterval(function () {
                right.click();
            }, 2000)
        });

        var ul = box.querySelector('ul');
        var ol = box.querySelector('ol');

        // 点击圆点实现轮播效果
        for (var i = 0; i < ul.children.length; i++) { // 根据图片张数动态生成圆点个数
            var li = document.createElement('li');
            li.setAttribute('index', i);
            ol.appendChild(li);

            li.addEventListener('click', function () {
                for (var i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = '';
                }
                this.className = 'current';


                var index = this.getAttribute('index');// 把索引值赋给两个根据图片位置而改变的变量
                num = index;
                circle = index;
                animate(ul, -index * boxWidth); // 调用轮播函数

            })
        }

        // 设置初始时第一个圆点为选中状态
        ol.children[0].className = 'current';

        // 克隆第一张图片放到最后
        var firstImg = ul.children[0].cloneNode(true);
        ul.appendChild(firstImg);

        // 点击右侧按钮实现轮播效果
        var num = 0;
        var circle = 0;
        right.addEventListener('click', function () {

            if (num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;
            }
            num++;
            animate(ul, -num * boxWidth);

            // 选中圆圈跟随图片移动
            circle++;
            if (circle == ol.children.length) {
                circle = 0;
            }
            circleChange();

        })


        // 点击右侧按钮实现轮播效果
        left.addEventListener('click', function () {

            if (num == 0) {
                num = ul.children.length - 1;
                ul.style.left = -num * boxWidth + 'px';
            }
            num--;
            animate(ul, -num * boxWidth);

            // 选中圆圈跟随图片移动
            circle--;
            if (circle < 0) {
                circle = ol.children.length - 1;
            }
            circleChange();

        })

        function circleChange() {
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            ol.children[circle].className = 'current';
        }

        // 自动播放
        var timer = setInterval(function () {
            right.click();
        }, 2000)
        
    </script>