原生轮播图_children[0].classlist.add("listyle");-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43388107/article/details/110467519
可直接食用
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .clearfix::after {
        content: "";
        display: block;
        clear: both;
    }

    .focus {
        width: 1200px;
        height: 800px;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
        box-sizing: border-box;
        border: 5px solid #ccc;
    }

    .focus-ul {
        /* width: 7000px; */
        height: 800px;
        position: absolute;
        top: 0;
        left: 0;

    }

    .focus-ul li {
        cursor: pointer;
        width: 1200px;
        height: 800px;
        float: left;
    }

    .left {
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        font-size: 24px;
        padding: 15px 30px;
        background-color: rgba(0, 0, 0, .3);
        color: #fff;
        z-index: 9;
        display: none;
    }

    .right {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        font-size: 24px;
        padding: 15px 30px;
        background-color: rgba(0, 0, 0, .3);
        color: #fff;
        z-index: 9;
        display: none;
    }

    .focus-ol {
        display: inline-block;
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
    }

    .focus-ol li {
        cursor: pointer;
        display: inline-block;
        width: 10px;
        height: 10px;
        margin: 0 10px;
        border: 1px solid #fff;
        border-radius: 50%;
    }

    .current {
        background-color: #fff;
    }
</style>

<body>
    <div class="focus">
        <!-- 左右按钮  -->
        <a class="left" href="javascript:;">&lt;</a>
        <a class="right" href="javascript:;">&gt;</a>
        <!-- 内容 -->
        <ul class="clearfix focus-ul">
            <li><img src="./img/banner1.jpg" alt=""></li>
            <li><img src="./img/banner2.jpg" alt=""></li>
            <li><img src="./img/banner3.jpeg" alt=""></li>
            <li><img src="./img/banner4.jpg" alt=""></li>
        </ul>
        <!-- 小圆圈 -->
        <ol class="focus-ol"></ol>
    </div>

    <script>
        //获取元素
        var focus = document.querySelector('.focus');//最外层div
        var left = document.querySelector('.left');//左按钮
        var right = document.querySelector('.right');//右按钮
        var focus_ul = document.querySelector('.focus-ul');//ul
        var focus_ul_li = document.querySelectorAll('.focus-ul li')//ul里的所有li
        var focus_ol = document.querySelector('.focus-ol');//ol
        var focus_ol_li; //获取所有ol中的li
        var focusWidth = focus.offsetWidth;//最外层div宽度
        var index = 0;//点击按钮移动图片下标
        var circle = 0;//点击按钮移动小圆点下标
        var timer;//定时器
        var flag = true;//创建节流阀控制点击事件触发

        //ul的长度
        ulLength();

        //鼠标移入显示左右按钮
        showBtn();

        //添加小圆点
        circles();

        //小圆点添加点击事件
        circlesClick();

        //点击小圆点移动图片
        circlesClickMove();

        //复制第一张图片到最后面
        cloneImg();

        //点击右按钮
        rightBtn();

        //点击左按钮
        leftBtn();

        //创建定时器让图片不断移动
        creationInterval();

        //ul的长度
        function ulLength(){
            focus_ul.style.width = focusWidth * focus_ul_li.length + focusWidth + 'px';
        }

        //鼠标移入显示左右按钮
        function showBtn() {
            focus.addEventListener('mouseenter', function () {
                left.style.display = 'block';
                right.style.display = 'block';
                //清除定时器
                clearInterval(timer);
            });
            focus.addEventListener('mouseleave', function () {
                left.style.display = 'none';
                right.style.display = 'none';
                //创建定时器
                creationInterval();
            });
        }

        //添加小圆点
        function circles() {
            for (let i = 0; i < focus_ul.children.length; i++) {
                let li = document.createElement('li');
                focus_ol.appendChild(li);
            }
            focus_ol.children[0].classList.add('current');
            focus_ol_li = focus_ol.children;
        }

        //小圆点添加点击事件
        function circlesClick() {
            for (let i = 0; i < focus_ol_li.length; i++) {
                focus_ol_li[i].addEventListener('click', function () {
                    //点击添加样式
                    for (let j = 0; j < focus_ol_li.length; j++) {
                        focus_ol_li[j].classList.remove('current');
                    }
                    this.classList.add('current');
                })
            }
        }

        //小圆点点击移动图片
        function circlesClickMove() {
            for (let i = 0; i < focus_ol_li.length; i++) {
                focus_ol_li[i].addEventListener('click', function () {
                    animate(focus_ul, -i * focusWidth)
                })
            }
        }

        //复制第一张图片
        function cloneImg() {
            let first_img = focus_ul_li[0].cloneNode(true);
            focus_ul.appendChild(first_img);
        }

        //点击右按钮
        function rightBtn() {
            right.addEventListener('click', function () {
                rightBtnMove();
            })
        }

        //点击右按钮移动
        function rightBtnMove() {
            if (flag) {
                flag = false;
                if (index >= focus_ul_li.length) {
                    index = 0;
                    focus_ul.style.left = 0;
                }
                index++;
                animate(focus_ul, -index * focusWidth, function () {
                    flag = true;
                });
                rightBtnClickCirclesConversion();
            }
        }
        //点击左按钮
        function leftBtn() {
            left.addEventListener('click', function () {
                leftBtnMove();
            })
        }

        //点击左按钮移动
        function leftBtnMove() {
            if (flag) {
                flag = false;
                if (index == 0) {
                    index = focus_ul_li.length;
                    focus_ul.style.left = -index * focusWidth + 'px';
                }
                index--;
                animate(focus_ul, -index * focusWidth, function () {
                    flag = true;
                });
                leftBtnClickCirclesConversion();
            }
        }

        //点击右按钮小圆点变换
        function rightBtnClickCirclesConversion() {
            circle++;
            if (circle >= focus_ol_li.length) {
                circle = 0;
            }
            btnCircleStyle();
        }

        //点击左按钮小圆点变换
        function leftBtnClickCirclesConversion() {
            if (circle == 0) {
                circle = focus_ol_li.length;
            }
            circle--;
            btnCircleStyle();
        }

        //点击左右按钮，小圆点添加样式
        function btnCircleStyle() {
            for (let i = 0; i < focus_ol_li.length; i++) {
                for (let j = 0; j < focus_ol_li.length; j++) {
                    focus_ol_li[j].classList.remove('current');
                }
                focus_ol_li[circle].classList.add('current');
            }
        }

        //图片移动动画
        function animate(obj, target, callback) {
            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);
                    //回调函数写在定时器结束里面
                    // if(callback){
                    //     callback();
                    // }
                    callback && callback();
                }
                //把每次加1 这个步长值改为一个慢慢变小的值 步长公式:(目标值 - 现在位置) / 10 
                obj.style.left = obj.offsetLeft + step + 'px';
            }, 15);
        }

        //创建定时器
        function creationInterval() {
            timer = setInterval(function () {
                right.click();
            }, 2000)
        }
    </script>
</body>

</html>