轮播图（自动轮播/动态添加图片数量的提示）

ゝ一世哀愁。 2022-10-27 01:40 138阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
         
            ul, li, ol {
                list-style: none;
            }
         
            .slider {
                width: 590px;
                height: 470px;
                border: 1px solid #eee;
                margin: 100px auto;
                padding: 5px;
                position: relative;
            }
         
            .inner {
                width: 590px;
                height: 470px;
                background: pink;
                position: relative;
                overflow: hidden;
            }
         
            .inner img {
                display: block;
                width: 590px;
                height: 470px;
            }
         
            .inner ul {
                width: 800%;
                position: absolute;
                top: 0;
                left: 0;
            }
         
            .inner li {
                float: left;
            }
         
            .slider ol {
                position: absolute;
                left: 50%;
                margin-left: -80px;
                bottom: 10px;
            }
         
            .slider ol li {
                float: left;
                width: 18px;
                height: 18px;
                background: #fff;
                margin-right: 10px;
                text-align: center;
                line-height: 18px;
            }
         
            .slider ol li.current {
                background: coral;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div class="slider" id="slider">
            <div class="inner">
                <ul>
                    <li><a href="#"><img src="../../images/1.jpg" alt=""></a></li>
                    <li><a href="#"><img src="../../images/2.jpg" alt=""></a></li>
                    <li><a href="#"><img src="../../images/3.jpg" alt=""></a></li>
                    <li><a href="#"><img src="../../images/4.jpg" alt=""></a></li>
                    <li><a href="#"><img src="../../images/1.jpg" alt=""></a></li>
                    <li><a href="#"><img src="../../images/2.jpg" alt=""></a></li>
                </ul>
            </div>
        </div>
    </body>
    <script>
        // 获得元素
        var slider = document.getElementById("slider");
        var ul = slider.children[0].children[0];
        var ullis = ul.children;
     
        // 1、动态复制最后一张图
        ul.appendChild(ullis[0].cloneNode(true));
     
        // 2、动态生成小圆点
        var ol = document.createElement("ol");
        slider.appendChild(ol);
        for (var i = 0; i < ullis.length - 1; i++) {
            var li = document.createElement("li");
            li.innerHTML = i + 1;
            ol.appendChild(li);
        }
        ol.children[0].setAttribute("class", "current");
     
        // 3、鼠标经过小圆点  圆点事件
        var ollis = ol.children;
        for (var i = 0; i < ollis.length; i++) {
            ollis[i].index = i; // 自定义属性
            ollis[i].onmouseover = function () {
                for (var j = 0; j < ollis.length; j++) { // 去掉所有小圆点的class
                    ollis[j].removeAttribute("class");
                }
                ollis[this.index].setAttribute("class", "current"); // 保留当前小圆点的class
     
                // 图片动画
                animate(ul, -this.index * ullis[0].offsetWidth);
     
                key = point = this.index; // 从当前开始动画
            }
        }
     
        // 缓动动画函数
        var leader = 0;//缓动动画变量
        function animate(obj, target) {
            clearInterval(obj.timer); // 清除定时器
            /*定时任务，缓动轮播 30毫秒到target位置*/
            obj.timer = setInterval(function () {
                leader = leader + (target - leader) / 10;//缓动动画公式
                obj.style.left = leader + "px";
            }, 10);
        }
     
        // 4、轮播图定时器
        var timer = null;
        timer = setInterval(autoplay, 3000);
        var key = 0; // 控制播放张数
        var point = 0; // 控制小圆点
        function autoplay() {
            // 播放张数
            key++;
            if (key > ullis.length - 1) { // 判断是否播放完
                leader = 0; // 迅速跳回
                key = 1; // 下次播放第二张
            }
            animate(ul, -key * ullis[0].offsetWidth);
     
            // 小圆点
            point++;
            if (point > ollis.length - 1) {
                point = 0;
            }
            for (var i = 0; i < ollis.length; i++) { // 先清除所有的
                ollis[i].removeAttribute("class");
            }
            ollis[point].setAttribute("class", "current") // 再保留现在的
        }
     
        // 5、鼠标经过事件
        slider.onmouseover = function () {
            clearInterval(timer);
        }
        slider.onmouseout = function () {
            timer = setInterval(autoplay, 3000);
        }
    </script>
    </html>