快乐小demo-JS实现轮播图（淘宝版）_js实现淘宝轮播图-CSDN博客

本文链接：https://blog.csdn.net/s2422617864/article/details/108742280
图片链接需要自行更换
注释清晰欢迎问答及指正
代码如下
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            border: 0;
        }

        .all {
            width: 500px;
            height: 300px;
            padding: 7px;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }

        .screen {
            width: 500px;
            height: 300px;
            overflow: hidden;
            position: relative;
        }

        .screen li {
            width: 500px;
            height: 300px;
            overflow: hidden;
            float: left;
        }

        .screen ul {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 3000px;
        }

        .all ol {
            position: absolute;
            right: 10px;
            bottom: 10px;
            line-height: 20px;
            text-align: center;
        }

        .all ol li {
            float: left;
            width: 20px;
            height: 20px;
            background: #fff;
            border: 1px solid #ccc;
            margin-left: 10px;
            cursor: pointer;
        }

        .all ol li.current {
            background: yellow;
        }

        #arr {
            display: none;
            z-index: 1000;

        }

        #arr span {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #000;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-family: '黑体';
            font-size: 30px;
            color: #fff;
            opacity: 0.3;
            border: 1px solid #fff;
        }

        #arr #right {
            right: 5px;
            left: auto;
        }
    </style>
</head>

<body>
    <div class="all" id='box'>
        <div class="screen" id="screen">
            <ul>
                <li>
                    <img src="../images/1.jpg" width="500" height="300" />
                </li>
                <li>
                    <img src="../images/10.jpg" width="500" height="300" />
                </li>
                <li>
                    <img src="../images/11.jpg" width="500" height="300" />
                </li>
                <li>
                    <img src="../images/9.jpg" width="500" height="300" />
                </li>
                <li>
                    <img src="../images/7.jpg" width="500" height="300" />
                </li>
            </ul>
            <ol>

            </ol>
        </div>
        <div id="arr">
            <span id="left">&lt;</span>
            <span id="right">&gt;</span>
        </div>
    </div>

    <script src="./move.js"></script>
    <script>
        let timess = '';
        var screenObj = document.querySelector('#screen');
        var ulObj = document.querySelector('ul');
        var lisObj = ulObj.children;
        var leftObj = document.querySelector('#left');
        var rightObj = document.querySelector('#right');
        var olObj = document.querySelector('ol');
        var arrObj = document.querySelector('#arr');
        var boxObj = document.querySelector('#box');


        // 创建和图片绑定的按钮
        liLength = lisObj.length
        for (var i = 0; i < liLength; i++) {
            // 创建每一个小东西
            var olLi = document.createElement('li');
            olLi.innerHTML = i + 1;
            if (i == 0) {
                // 第一个给人家上颜色
                olLi.classList.add('current');
            }
            // 追加到ol上
            olLi.setAttribute('key', i);
            olObj.appendChild(olLi);
            olLi.onclick = banner;
        }
        var imgIndex = 0;
        // 获取图片宽度
        var imgW = lisObj[0].offsetWidth;
        //点击按钮的回调函数
        function banner() {
            console.log(1);
            // console.log(this.getAttribute('key'));
            imgIndex = this.getAttribute('key');
            var target = -imgIndex * imgW;
            console.log(target);
            startMove(ulObj, { left: target }, function () {
                console.log(123);
            });
            selOl();
        }
        //点击右侧按钮事件
        //预防用户瞎几把乱点
        var isClick = true;
        rightObj.onclick = function () {
            if (!isClick) return;
            // 判断是否到头
            isClick = false;
            var change = false;
            if (imgIndex == olObj.children.length - 1) {
                var target = -olObj.children.length * imgW;
                change = true
                imgIndex = 0;
            } else {
                imgIndex++;
                var target = -imgIndex * imgW;
            }
            startMove(ulObj, { left: target }, function () {
                change && (ulObj.style.left = '0px')
                isClick = true;
            })
            selOl();

        }
        //点击左侧按钮事件
        leftObj.onclick = function () {
            if (!isClick) return;
            isClick = false;
            //判断是否到开头
            if (imgIndex == 0) {
                var totalLength = ulObj.children.length;
                ulObj.style.left = -(totalLength - 1) * imgW + 'px';
                imgIndex = totalLength - 2;
            } else {
                imgIndex--;
            }
            var target = -imgIndex * imgW;
            startMove(ulObj, { left: target }, function () {
                isClick = true;
            })
            selOl();
            isClick = true;
        }
        function autoplay() {
            timess = setInterval(() => {
                rightObj.onclick();
            }, 3000)
        }
        //图片的克隆
        let cloneImge = lisObj[0].cloneNode(true);
        cloneImge.style.borderTop = '1px solid red';
        ulObj.appendChild(cloneImge);
        // 设置按钮显隐
        boxObj.onmouseover = function () {
            leftObj.parentElement.style.display = 'block';
            clearInterval(timess);
        }
        boxObj.onmouseout = function () {
            leftObj.parentElement.style.display = 'none';
            autoplay(timess);
        }
        function selOl() {
            for (var i = 0; i < olObj.children.length; i++) {
                olObj.children[i].classList.remove('current');
            }
            olObj.children[imgIndex].classList.add('current');
        }
    </script>
</body>

</html>