css+javaScript轮播图

今天和大家分享一个很常见的效果，也就是轮播图，轮播图主要的功能点就是，自动轮播、上一张、下一张、以及跟踪的圆点。接下来就一个一个的来说一下，注意，本文主要针对初学者，也就是已经了解了HTML、Css、以及JavaScript。接下来我们就来看一下具体的代码实现。

1. Html部分

html 复制代码

<div class="box">
        <img src="../../img/slider01.jpg" alt="">
        <p>对人类来说会不会太超前了？</p>
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <p class="btn"><button class="backBtn"><</button>&nbsp;&nbsp;<button class="nextBtn">></button></p>
    </div>

首先我们需要一个承载图片的标签也就是img标签，这个标签在之后会展示所有的轮播图片，其次就是承载我们的文本内容的标签，这些都是根据自己需要来自行添加的，接下来就需要来设置一个小圆点的盒子，在这里我使用ul和li来实现这部分。接下来的css部分我就不一一讲解了，我们直接来看js部分。

2. Css部分

css 复制代码

<style>
      ul,li{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .box{
            width: 800px;
            color: white;
            margin: 100px auto;
            padding-bottom: 10px;
            background: rgb(100, 67, 68);
            position: relative;
            p{
                padding-left: 10px;
            }
            img{
                width: 100%;
            }
            ul{
                padding-left: 10px;
                display: flex;
                li{
                    margin-right: 10px;
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    background: rgba(0, 0, 0 , .5);
                }
                .active{
                    background: #fff;
                }
            }
            .btn{
                position: absolute;
                bottom: 15px;
                right: 10px;
                font-size: 20px;
            }
        }
    </style>

3. JavaScript部分

js 复制代码

<script>
        const sliderData = [
          { url: '../image/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
          { url: '../image/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
          { url: '../image/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
          { url: '../image/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
          { url: '../image/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
          { url: '../image/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
          { url: '../image/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
        ]
        let oImg = document.querySelector("img")
        let oBox = document.querySelector(".box")
        let oP = document.querySelector("p")
        let oLi = document.querySelectorAll("li")
        let backBtn = document.querySelector(".backBtn")
        let nextBtn = document.querySelector(".nextBtn")
        let num = 0
        let timer = null
        
        function updateSlider() {
            // Clear all active classes
            for(let i = 0; i < oLi.length; i++) {
                oLi[i].classList.remove('active')
            }
            // Update display
            oImg.src = sliderData[num].url
            oP.innerHTML = sliderData[num].title
            oBox.style.backgroundColor = sliderData[num].color
            oLi[num].classList.add('active')
        }
        
        function startTimer() {
            timer = setInterval(() => {
                num = (num + 1) % sliderData.length
                updateSlider()
            }, 1000)
        }
        
        // Initialize slider
        updateSlider()
        startTimer()
        
        // Back button
        backBtn.onclick = function() {
            clearInterval(timer)
            num = (num - 1 + sliderData.length) % sliderData.length
            updateSlider()
            startTimer()
        }
        
        // Next button
        nextBtn.onclick = function() {
            clearInterval(timer)
            num = (num + 1) % sliderData.length
            updateSlider()
            startTimer()
        }
        
        // Dot navigation
        for(let i = 0; i < oLi.length; i++) {
            oLi[i].onclick = function() {
                clearInterval(timer)
                num = i
                updateSlider()
                startTimer()
            }
        }
    </script>

好，直接来分析一下JavaScript首先我们需要来获取到所有的事件源：

js 复制代码

let oImg = document.querySelector("img")
let oBox = document.querySelector(".box")
let oP = document.querySelector("p")
let oLi = document.querySelectorAll("li")
let backBtn = document.querySelector(".backBtn")
let nextBtn = document.querySelector(".nextBtn")

以上是获取的所有DOM节点。接下来我们来初始化一个变量来表示当前图片的索引，默认索引是0，也就是第一张图片，我们来看一下自动轮播功能。

3.1. 自动轮播

js 复制代码

function updateSlider() {
    // Clear all active classes
    for(let i = 0; i < oLi.length; i++) {
        oLi[i].classList.remove('active')
    }
    // Update display
    oImg.src = sliderData[num].url
    oP.innerHTML = sliderData[num].title
    oBox.style.backgroundColor = sliderData[num].color
    oLi[num].classList.add('active')
}

function startTimer() {
    timer = setInterval(() => {
        num = (num + 1) % sliderData.length
        updateSlider()
    }, 1000)
}

// Initialize slider
updateSlider()
startTimer()

轮播的操作也就是在一段时间后将当前的图片替换成另一张，那么我们先来看第一段代码的功能，也就是startTimer()，这个函数是用来更新我们的页面的，一是来更新索引，二是来更新页面，从而做到图片的切换，由于在这里我们是自动播放，所以需要使用到计时器，让num每秒进行加1的操作，直到增加到数组的长度，两个相同的数进行取模操作，会得到0，也就是当达到数组长度的时候就会将num重新赋值为0，继续执行增加1的操作。这样就可以实现自动轮播，那么我们就来看看这个函数中的具体更新操作的函数updateSlider()在这个函数中我们需要去处理小圆点和图片的具体操作，也就是我们在开始的时候需要将所有小圆点中的样式移除掉，然后我们就需要去获取到图片的src属性将其更改为对应num索引下的图片，其余文字和背景色都类似，在最后将对应远点的样式添加上就可以了，最后我们来初始化自动轮播。这样简单的自动轮播就可以实现。那么接下俩就一起来看看返回上一张的操作。

3.2. 上一张

js 复制代码

backBtn.onclick = function() {
    clearInterval(timer)
    num = (num - 1 + sliderData.length) % sliderData.length
    updateSlider()
    startTimer()
}

关于返回上一张，不难想到只要去变动num的值然后重新去更新页面就可以，那么关键的就是如何去巧妙的返回到上一张图片。在这里我们同样使用数组的长度来执行这一操作， (num - 1 + sliderData.length) % sliderData.length比如现在我们在图片的最后一张，也就是num等于6，那么返回上一张也就是将num的值返回到5，我们代入理解一下，上面的代码可以理解为(6-1+7)%7最终的结果就是5，也就是说通过这个公式就可以完美的实现num值的回退。回退num值后重新初始化更新函数以及计时器。接下来的下一张就简单多了。

3.3. 下一张

js 复制代码

 nextBtn.onclick = function() {
    clearInterval(timer)
    num = (num + 1) % sliderData.length
    updateSlider()
    startTimer()
}

忘了说明一点，不论是在执行上一张的操作还是下一张的操作，我们都需要去将原有的计时器清除掉，不然会出现bug，也就是你点击之后，你的计时器还在执行，就会出现小圆点和图片来回跳动的bug，所以需要去清除计时器。那么接下来就继续说下一张的操作，在这里更改num值的公式值需要和计时器中的一样就可以了，都是让num进行加1的操作，所以放在这里依然适用。接着初始化更新函数以及计时器函数就可以了。最后我们就来看看点击小圆点来查看图片。

3.4. 小圆点查看

js 复制代码

 for(let i = 0; i < oLi.length; i++) {
    oLi[i].onclick = function() {
        clearInterval(timer)
        num = i
        updateSlider()
        startTimer()
    }
}

不难发现在上边的代码中关键的操作依然是去变动num的值来实现指定图片的查看，所以在这里我们先去遍历所有的小圆点节点，为每一个远点都添加点击事件，当我们点击的时候清除掉计时器，也就是自动播放的计时器，然后将num更改为小圆点索引对应的图片索引，在这里直接将i赋值给num就可以了，因为小圆点的数量和图片的数量是一样的是，所以都是一一对应的，最后我们只要重新初始化更新函数和计时器就可以了，那么说到这里我们的轮播图就做好了。

4. 结语

通过本文的学习，我们实现了一个功能完整的轮播图组件，包含了以下核心功能：

自动轮播功能（通过setInterval实现）
上一张/下一张导航按钮
小圆点指示器导航
平滑的内容切换效果

关键点总结

数据结构设计：使用数组存储轮播内容，便于管理和扩展
状态管理：通过num变量跟踪当前显示的幻灯片索引
模块化函数：将更新逻辑封装在updateSlider函数中，提高代码复用性
定时器管理：在用户交互时清除并重启定时器，避免冲突
循环逻辑：使用取模运算实现无限循环轮播效果

希望这个教程能帮助你理解轮播图的基本实现原理。掌握了这些基础知识后，你可以尝试实现更复杂的轮播效果，或者将其封装成可复用的组件。

记住，前端开发最重要的是理解原理而非死记代码。建议你尝试自己从头实现一遍，遇到问题再回来看解决方案，这样学习效果会更好！