原生js实现小米官网轮播图效果

效果图

 首先搭建基本的html结构

html

给li一个自定义属性，data-id.后面接序号，与数组中的图片下标一一对应。

 <div class="banner">
        <img src="sc.html/lb1.jpg" alt="">
        <div class="bannerLeft">&lt;</div>
        <div class="bannerRight">&gt;</div>
        <div class="bannerBottom">
            <ul>
                <li class="active" data-id="0"></li>
                <li data-id="1"></li>
                <li data-id="2"></li>
                <li data-id="3"></li>
            </ul>
        </div>
    </div>

css

 .banner {
            width: 1000px;
            height: 400px;
            margin: 100px auto;
            position: relative;
        }
        .banner img {
            width: 100%;
            height: 100%;
        }
        .bannerLeft,
        .bannerRight {
            position: absolute;
            top:180px;
            width: 50px;
            height: 50px;
            font-size: 40px;
            color: #fff;
            text-align: center;
            line-height: 50px;
            opacity: .5;
            cursor: pointer;
        }
        .bannerLeft:hover {
            background-color: gainsboro;
        }
        .bannerRight:hover {
            background-color: gainsboro;
        }
        .bannerLeft {
            left: 0;
        }
        .bannerRight {
            right: 0;
        }
        .bannerBottom {
            position: absolute;
            bottom: 20px;
            right: 15px;
        }
        .bannerBottom li {
            float: left;
            list-style: none;
            width: 15px;
            height: 15px;
            margin-right: 5px;
            border-radius: 50%;
            background-color: gainsboro;
        }
        .bannerBottom .active {
            background-color: #fff;
        }

搭建好基础结构，接下来是js部分

首先定义一个数组arr,数组中放入轮播图中的图片地址

 const arr = [
            {url:'sc.html/lb1.jpg'},
            {url:'sc.html/lb2.webp'},
            {url:'sc.html/lb3.webp'},
            {url:'sc.html/lb4.webp'},
        ]

然后获取对应的对象

        const ul=document.querySelector('.bannerBottom ul')
       
        const banner = document.querySelector('.banner')

        const img = document.querySelector('img')

        // 获取左键
        const bannerLeft = document.querySelector('.bannerLeft')

        // 获取右键
        const bannerRight = document.querySelector('.bannerRight')

点击功能：

给左边箭头（bannerLeft）和右边箭头(bannerRight)绑定点击事件

定义一个全局变量i

方便各个函数中可以使用

let i = 0

左边箭头点击事件,需要加上一个判断条件，当i<0时，也就是到第一张图片时，前面是没有图片的，所以需要跳转到最后一张图片

// 左键点击事件
        bannerLeft.addEventListener('click',function() {
            i--
            if(i<0) {
                i=arr.length-1
            }
       img.src=arr[i].url
})

轮播图中的li，也就是右下角对应的小圆圈也要对应变换，遵循“先移除，后添加”

获取li时，要使用模板字符串`${}`

 document.querySelector('.bannerBottom .active').classList.remove('active')
 document.querySelector(`.bannerBottom li:nth-child(${i + 1})`).classList.add('active')

右边箭头点击事件，同样需要加上一个判断条件，当i>=arr.length时，也就是到数组最后一张图片时，后面是没有图片的，所以需要跳转到第一张图片

获取li与左键同理

 // 右键点击事件
        bannerRight.addEventListener('click',function() {
            i++
            if(i>=arr.length) {
                i=0
            }
            img.src=arr[i].url
    document.querySelector('.bannerBottom .active').classList.remove('active')
    document.querySelector(`.bannerBottom li:nth-child(${i + 1})`).classList.add('active')
        })

当点击右下角的li时，跳转到对应的图片

使用事件委托，绑定ul。

此时需要获取点击li时对应的自定义属性id(e.target.dataset.id)

将点击li时对应的自定义属性id作为数组对象下标即可

后面依旧是li的active的移除与添加

        ul.addEventListener('click',function(e) {
        img.src=arr[e.target.dataset.id].url
        document.querySelector('.bannerBottom .active').classList.remove('active')
        e.target.classList.add('active')
       })

自动播放功能

使用setInterval

因为自动播放时与右键点击事件重复的动作是一样的，所以这里直接使用右键点击事件

bannerRight.click()

 // 自动播放器
       let zd = setInterval(function() {
            bannerRight.click()
        },3000)

为了用户更好的体验，所以当鼠标进入轮播图时，轮播图就会自动停止播放

使用clearInterval(定时器的名字)清除定时器

  // 鼠标进入
       banner.addEventListener('mouseenter',function() {
        clearInterval(zd)
       })

当鼠标离开时，轮播图又恢复自动播放的功能

 //    鼠标离开
    banner.addEventListener('mouseleave',function() {
        // 先关
        clearInterval(zd)
        // 再开
        zd = setInterval(function() {
            bannerRight.click()
        },3000)
       })

如有错误，积极接受批评指正。