!DOCTYPE htmlhtml lang=en head meta charset=UTF-8 meta http-equiv=X-UA-Compatible content=IE=edge meta name=viewport content=width=device-width initial-scale=10 title轮播图title !-

    <div class="dots">
        <!-- 底部索引栏 -->
        <div class="dot now"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
    </div>
</div>

<script>
    // 图片数据
    var data = [
        'https://www.imagehub.cc/image/1.rZ5F4q',
        'https://s3.bmp.ovh/imgs/2023/09/20/0e692a3967a05023.jpg',
        'https://s3.bmp.ovh/imgs/2023/09/20/5f59deacfcb1a1a6.jpg',
        'https://s3.bmp.ovh/imgs/2023/09/20/5f73db7c7f85563f.jpg'
    ];

    // 获取元素
    var dWrap = document.getElementsByClassName("wrap")[0];
    var dPrev = document.getElementsByClassName("prev")[0];
    var dNext = document.getElementsByClassName("next")[0];
    var dots = document.getElementsByClassName("dot");
    var showIndex = 0; //显示当前图片的下标
    var timer = null;

    // 设置定时器，每隔5秒切换图片
    timer = setInterval(function () {
        // 清除上个dot的状态
        dots[showIndex].classList.remove("now");
        // 切换为下一张图片
        showIndex += 1;
        // 越界处理
        showIndex = showIndex === data.length ? 0 : showIndex;
        // 改变背景
        changeBg(data[showIndex]);
        // 修改当前dot的状态
        dots[showIndex].classList.add("now");
    }, 5000)

    // 点击指示点dot切换图片
    for (var i = 0; i < dots.length; i++) {
        // 给dot动态添加下标
        dots[i].index = i;
        // 点击事件
        dots[i].onclick = function () {
            // 清除上个dot的状态
            dots[showIndex].classList.remove("now");
            // 切换为点击的图片
            showIndex = this.index;
            // 越界处理
            showIndex = showIndex === data.length ? 0 : showIndex;
            // 改变背景
            changeBg(data[showIndex]);
            // 修改当前dot的状态
            dots[showIndex].classList.add("now");
        }
    }

    // 点击左箭头切换到上一张图片
    dPrev.onclick = function () {
        // 清除上个dot的状态
        dots[showIndex].classList.remove("now");
        // 切换为上一张图片
        showIndex -= 1;
        // 越界处理
        showIndex = showIndex === -1 ? data.length - 1 : showIndex;
        // 改变背景
        changeBg(data[showIndex]);
        // 修改当前dot的状态
        dots[showIndex].classList.add("now");
    }

    // 点击右箭头切换到下一张图片
    dNext.onclick = function () {
        // 清除上个dot的状态
        dots[showIndex].classList.remove("now");
        // 切换为下一张图片
        showIndex += 1;
        // 越界处理
        showIndex = showIndex === data.length ? 0 : showIndex;
        // 改变背景
        changeBg(data[showIndex]);
        // 修改当前dot的状态
        dots[showIndex].classList.add("now");
    }

    // 改变wrap的背景
    function changeBg(pic) {
        dWrap.style.backgroundImage = `url(${pic})`;
    }
    changeBg(data[0]);
</script>