自动滚动轮播图（鼠标悬停暂停轮播）

<!DOCTYPE html>
<html 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=1.0">
<title>轮播图</title>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    li {
        list-style: none;
    }
    a {
        text-decoration: none;
        color: #343434;
    }
    div.banner {
        width: 80vw;
        margin: 0 auto;
        position: relative;
        z-index: 10;
    }
    div.banner div.images {
        width: 100%;
    }
    div.banner div.images a {
        width: 100%;
        height: 100%;
        display: none;
    }
    div.banner div.images a.active {
        display: block;
    }
    div.banner div.images img {
        width: 100%;
    }
    div.banner div.btns {
        position: absolute;
        width: auto;
        display: grid;
        grid-template-columns: repeat(4, 20px);
        gap: 10px;
        height: 10px;
        bottom: 20px;
        right: 20px;
        z-index: 200;
        overflow: hidden;
    }
    div.banner div.btns span {
        width: 100%;
        height: 100%;
        display: block;
        background-color: aliceblue;
        border-radius: 10px;
        cursor: pointer;
        font-size: 2px;
    }
    div.banner div.btns span:hover,
    div.banner div.btns span.active {
        background-color: blueviolet;
    }
</style>
</head>
<body>
<div class="banner">
    <div class="images">
        <a href="https://www.php.cn/k.html" target="_blank"><img
                src="https://img.php.cn/upload/aroundimg/000/000/001/62ea76c2b5ace916.png"></a>
        <a href="https://www.php.cn/k.html?1" target="_blank"><img
                src="https://img.php.cn/upload/aroundimg/000/000/001/62b2806382aa1939.png"></a>
        <a href="https://www.php.cn/blog/detail/33314.html" data-index="3"><img
                src="https://img.php.cn/upload/aroundimg/000/000/001/623c25c006c91144.jpg"></a>
        <a href="https://www.php.cn/app/" target="_blank"><img
                src="https://img.php.cn/upload/aroundimg/000/000/068/62398180bdae8398.jpg"></a>
    </div>
    <div class="btns"></div>
</div>
<script>
    // 遍历图片，取到dataset.index
    const images = document.querySelectorAll('.images > a');
    //定时器开关
    let lunbo = '';
    // 为第一个图片，添加 active 样式
    images[0].classList.add('active');
    // 根据 key 的下标，添加 data-index 的标识
    images.forEach((item, key) => item.dataset.index = key);
    // 遍历按钮，取到dataset.index
    const btns = document.querySelector('.btns');
    // 在 btns 下面，添加 span
    images.forEach((item) => btns.insertAdjacentHTML('beforeEnd', `<span data-index='${item.dataset.index}'></span>`));
    // 找到 images 图片中 active 样式的下标，然后 btns 根据 下标 为 span 标签 添加 active 样式
    [...btns.children][[...images].find((item) => item.className == 'active').dataset.index].classList.add('active');
    // 添加事件，鼠标点击后，跳转图片
    btns.addEventListener('click', show, true);
    //添加事件，鼠标移入后，暂停轮播
    btns.addEventListener('mouseover', showStop, true);
    //添加事件，鼠标移出后，开始轮播
    btns.addEventListener('mouseout', showStart, true);
    function show() {
        if (event.target.dataset.index) {
            event.stopPropagation();   // 阻止事件冒泡
            event.preventDefault();    // 阻止默认事件
            // 移除 div.btns 下面 span 标签的 active 样式
            [...btns.children].forEach((item) => item.classList.remove('active'))
            // 为 div.btns 下面 span 标签 添加 active 样式
            event.target.classList.add('active');
            //移除 div.images 下面 A 标签的 active样式
            images.forEach((item) => item.classList.remove('active'));
            // 为 div.images 下面 A 标签 添加 active 样式
            [...images].find((item) => item.dataset.index == event.target.dataset.index).classList.add('active');
        }
    }
    function showStop() {
        event.target.dispatchEvent(new Event('click'));
        clearInterval(lunbo);
    }
    function showStart() {
        // 获取 btns 下 span 标签
        const lunboNavs = document.querySelectorAll('.btns span');
        // console.log([...lunboNavs].find((item) => item.className == 'active').dataset.index);
        // 定时播放
        lunbo = setInterval(function (arr) {
            let index = arr.shift();
            btns.children[index].dispatchEvent(new Event('click'));
            arr.push(index)
        }, 2000, Object.keys(btns.children));
    }
    showStart();
</script>
</body>
</html>
自动滚动轮播图（鼠标悬停 暂停轮播）

相关文章
