轮播图实例演示 -

代码

<!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>
        /* ! 3. 轮播图 */
        .slider {
            max-width: 750px;
            min-width: 320px;
            margin: auto;
            padding: 0 10px;
        }
        .slider .imgs {
            /* 图片容器必须要有高度,否则下面图片不能正常显示 */
            height: 150px;
        }
        .slider .imgs img {
            /* 图片完全充满父级空间显示 */
            height: 100%;
            width: 100%;
            /* 图片带有圆角 */
            border-radius: 10px;
            /* 默认图片全部隐藏,只有有active的图片才显示 */
            display: none;
        }
        .slider .imgs img:hover {
            cursor: pointer;
        }
        /* 默认显示第一张 */
        .slider .imgs img.active {
            display: block;
        }
        /* 轮播图按钮组 */
        .slider .btns {
            /* 按钮水平一排显示,用flex,且水平居中 */
            display: flex;
            place-content: center;
        }
        .slider .btns span {
            /* 按钮宽高相同,确定显示成一个正圆 */
            width: 8px;
            height: 8px;
            /* 加上红色背景和数字是为了布局时可以看到,一会更去掉 */
            background-color: rgba(255, 255, 255, 0.4);
            /* 50%可确保显示为正圆 */
            border-radius: 50%;
            /* 按钮上外边距负值,可将它上移,可移动到图片中下方 */
            margin: -12px 3px 5px;
        }
        .slider .btns span.active {
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div class="slider">
        <!-- 
            图片容器
            1. 图片组
            2. 按钮组
            注: 按钮数组与图片数量是一样的
         -->
        <div class="imgs">
            <!-- 轮播图默认从第一张开始显示 -->
            <img src="./images/banner1.jpg" alt="" data-index="1" class="active" />
            <img src="./images/banner2.jpg" alt="" data-index="2" />
            <img src="./images/banner3.png" alt="" data-index="3" />
        </div>
        <!-- 切换按钮数量与图片数量必须一致，一一对应 -->
        <div class="btns">
            <span data-index="1" class="active" onclick="setActive()"></span>
            <span data-index="2" onclick="setActive()"></span>
            <span data-index="3" onclick="setActive()"></span>
        </div>
    </div>
    <script>
        // 1.获取全部图片和按钮
        const imgs=document.querySelectorAll('.slider .imgs img');
        const btns=document.querySelectorAll('.slider .btns span');
        //2.设置激活状态
        function setActive(ele) {
            // 1.清空图片和所有按钮的激活状态
            imgs.forEach(img=>img.classList.remove('active'));
            btns.forEach(btn=>btn.classList.remove('active'));
            // 2.根据按钮的索引data-index来确定应该将哪一张图片显示出来class=active   
            // console.log(ele);
            // console.log(event.target);
            //给所有的图片和按钮加一个active
            event.target.classList.add('active');
            imgs.forEach(img=>{
                if (img.dataset.index===event.target.dataset.index){
                    img.classList.add('active')
                }
            })
        }
        // 3.自动播放
        // [1,2,3]
        // [2,3,1]
        // [3,1,2]
        // [1,2,3]
        // 首尾相连,实现循环播放
        // 自动点击: 事件派发器
        // 间歇式触发,每隔一段固定时间会自动触发一次事件
        // setInterval: 除了回调和时间外,还可传入第三个参数,做为回调的参数
        // setInterval((a)=>{
        //     console.log(a);
        // },2000,Object.keys(btns));
        // console.log(Object.keys(btns));
            let autoInter = setInterval((arr)=>{
                // 1.头部删除
                let i=arr.shift()
                //2.尾部追加
                arr.push(i);
                //3.事件派发：模拟用户点击
                btns[i].dispatchEvent(new Event('click'))
            },2000,Object.keys(btns));
            // console.log(Object.keys(btns));
            // console.log(Object.keys(imgs));
         // 作业1: 实现鼠标悬停时自动停止播放, 离开时又自动播放
         imgs.forEach((i) => {
            i.onmouseover = function () {
            clearInterval(autoInter);
            console.log("over");
         };
        i.onmouseout = function () {
            autoInter = setInterval(
            (arr) => {
            let i = arr.shift();
            arr.push(i);
            btns[i].dispatchEvent(new Event("click"));
            console.log(arr);
          },
          3000,
          Object.keys(btns)
        );
        console.log("out");
      };
    });
        // 作业2[可选]: 给这个轮播图加上翻页按按钮,实现向前和向后翻页播放   
    </script>
</body>
</html>
效果图