JavaScript API之实现图片轮播

HTML.

 <div id="lunb">
        <div id="tup"></div>  <!-- 图片区域 -->
        <div id="text">         <!--文字区域 -->
            <p></p>           <!-- 按钮区域 -->
            <button class="left">&lt;</button>  
            <button class="right">&gt;</button>
        </div>
        <div id="c">    <!-- 小圆点 -->
            <div class="cir gaoliang"></div>
            <div class="cir"></div>
            <div class="cir"></div>
            <div class="cir"></div>
        </div>
    </div>

CSS. 

 #lunb {    /*最大块*/
        margin: auto;
        width: 550px;
        height: 476px;
        background-color: LightSalmon;
    }
    #tup {    /*图片区域*/
        height: 400px;
    }
    #text {   /*文字区域*/
        position: relative;
        height: 42px;
        top: -16px;
        color: aliceblue;
        background-color: rgb(67, 58, 58);
        line-height: 42px;
    }
    .left {   /*左侧按钮*/
        position: relative;
        top: -60px;
        left: 410px;
    } 
    .right {    /*右侧按钮*/
        position: relative;
        top: -60px;
        left: 470px;
    }
    #c {
        height: 40px;
    }
    .cir {     /*小圆点*/
        position: relative;
        top: -10px;
        margin: 5px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        float: left;
        background-color: rgb(108, 105, 106);
    }
    .gaoliang {   /* 小圆点高亮显示 */
        background-color: rgb(249, 246, 247);
        width: 13.5px;
        height: 13.5px;
    }

JS.

       /* 图片路径数组 */
        const imgs = ["../PICTURE/a.jpg", "../PICTURE/b.jpg", "../PICTURE/c.jpg", "../PICTURE/d.jpg"]
        /* 文字数组 */
        const text = ["第一张图", "第二张图", "第三张图", "第四张图"]
       /* 颜色数组 */
        const col = ["RoyalBlue", "pink", "LightSalmon", "hotpink"]

        const lunb = document.querySelector("#lunb") //获取整个大块
        const img = document.querySelector("#tup")   //获取图片区域
        const tex = document.querySelector("#text p") //获取文字段落

        let i = 0  //序列号初始值
        function xuanran() {      //渲染函数
            img.style.background = `url(${imgs[i]}) no-repeat`
            img.style.backgroundSize = "cover"
            tex.innerHTML = `${text[i]}`
         //删除已有的高亮类
            lunb.style.backgroundColor = `${col[i]}`uerySelector(`.gaoliang`).classList.remove("gaoliang") 
         //对应小圆点高亮
            document.querySelector(`.cir:nth-child(${i + 1})`).classList.add("gaoliang")};

        let left = document.querySelector(".left")  //上一张按钮
        left.addEventListener('click', function () { // 切上一张图片
            i = i === 0 ? imgs.length - 1 : i - 1;//到第一项则切回最后一张
            xuanran()    //调用渲染函数
        })
 
        let right = document.querySelector(".right")  //下一张按钮
        right.addEventListener('click', function () {// 切下一张图片
            i = i === imgs.length - 1 ? 0 : i + 1;//到最后一项则切回第一张
            xuanran()     //调用渲染函数
        })

        // 初始化第一张图片
        img.style.background = `url(${imgs[i]}) no-repeat`
        img.style.backgroundSize = "cover"
        tex.innerHTML = `${text[i]}`
        lunb.style.backgroundColor = `${col[i]}`

        let ds = function ds() {     //播放下一张函数
            right.click()     //自动调用右按钮的点击事件
        }
        let clock = setInterval(ds, 1500)   //开启定时器

        const imgg = document.querySelector("#lunb")
        imgg.addEventListener("mouseenter", function () {
            clearInterval(clock)        //鼠标经过关闭定时器
        })
        imgg.addEventListener("mouseleave", function () {
            clock = setInterval(ds, 1500) //鼠标移开后重开定时器
        })

页面效果图

 注：图片每隔1.5s自动播放， 鼠标经过暂停，移开后继续播放 左右两侧按钮分别切换上一张和下一张 每张对应的小圆点高亮显示 背景色也随之改变