JavaScript原生实现轮播图效果详解

陆景行

发布时间：2026-10-16 | 6人浏览过

原创

本文将详细介绍如何利用原生 JavaScript、HTML 和 CSS 构建一个支持左右箭头导航和底部圆点指示器的轮播图组件。重点解析 DOM 元素获取、事件绑定、索引边界处理以及 CSS 透明度过渡动画的实现原理。

实现结果与目标

我们要实现的效果包含以下核心功能：
1. 多张图片在固定容器内重叠显示。
2. 通过“左/右”按钮点击实现图片的前后切换。
3. 底部圆点作为指示器，鼠标悬停时直接跳转到对应图片。
4. 所有状态变化均带有平滑的透明度渐变效果。

准备条件

在开始编码前，请确保准备好 5 张用于展示的图片（命名为 11.jpg 至 55.jpg），并放置在名为 banner-img 的文件夹中。我们将使用纯文本编辑器或代码编辑器创建一个新的 HTML 文件。

具体操作步骤

第1步：搭建 HTML 结构

目的：定义轮播图的容器、图片列表、导航按钮和指示器区域。
动作：创建主容器 #box，内部包含 ul#banner-list 存放图片项，span#left 和 span#right 作为导航按钮，以及 ul#tag-list 作为圆点指示器。

<div id="box">
    <ul id="banner-list">
        <li class="current-banner"><img src="banner-img/11.jpg" alt=""></li>
        <li><img src="banner-img/22.jpg" alt=""></li>
        <li><img src="banner-img/33.jpg" alt=""></li>
        <li><img src="banner-img/44.jpg" alt=""></li>
        <li><img src="banner-img/55.jpg" alt=""></li>
    </ul>
    <span id="left">&lt;</span>
    <span id="right">&gt;</span>
    <div>
        <ul id="tag-list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
</div>

第2步：编写 CSS 样式与动画

目的：定位元素，隐藏非当前图片，并定义过渡效果。
入口：页面 <head> 中的 <style> 标签。
关键参数：
- position: relative 为父容器建立定位上下文。
- opacity: 0 配合 transition: opacity 2s ease 实现淡入淡出。
- z-index 确保导航按钮和图片在正确层级显示。

* { margin: 0; padding: 0; }
ul { list-style: none; }
#box {
    margin: 30px auto;
    width: 590px;
    height: 340px;
    position: relative;
}
#banner-list > li {
    position: absolute;
    left: 0;
    right: 0;
    opacity: 0;
    transition: opacity 2s ease;
}
#left, #right {
    width: 30px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    font-size: 24px;
    color: rgba(255,255,255,0.7);
    background-color: rgba(0,0,0,0.3);
    position: absolute;
    top: 50%;
    margin-top: -30px;
    z-index: 3;
}
#right { right: 0; }
#tag-list {
    width: 130px;
    position: absolute;
    left: 50%;
    bottom: 8px;
    margin-left: -55px;
}
#tag-list > li {
    float: left;
    width: 18px;
    height: 18px;
    margin: 4px;
    text-align: center;
    line-height: 18px;
    font-size: 13px;
    background-color: white;
    border-radius: 9px;
    transition: background-color 1s ease;
}

第3步：初始化 DOM 元素与状态

目的：在窗口加载完成后，获取相关节点并设置默认显示状态。
动作：

获取 tag_list（圆点列表）和 list（圆点子元素数组）。
获取 banner_list（图片列表）和 bannerLi（图片项数组）。
将第一张图片（索引 0）设为可见：opacity = 1，背景色变红。
声明变量 count = 0，用于追踪当前显示的图片索引。

第4步：实现向右点击切换逻辑

目的：点击右侧按钮时，切换到下一张图片。
动作：

隐藏当前页：清除 bannerLi[count] 的类名，设置 opacity = 0，并将对应圆点 list[count] 背景恢复白色。
更新索引：count++。如果 count == 5（即最后一张之后），重置为 0。
显示新页面：给 bannerLi[count] 添加 current-banner 类，设置 opacity = 1，并将对应圆点 list[count] 背景设为红色。

var right = document.getElementById("right");
right.onclick = function (){
    bannerLi[count].className = ""
    bannerLi[count].style.opacity = 0
    list[count].style.backgroundColor = "white"

    if (++count == 5){ count = 0 }

    bannerLi[count].className = "current-banner"
    bannerLi[count].style.opacity = 1
    list[count].style.backgroundColor = "red"
}

第5步：实现向左点击切换逻辑

目的：点击左侧按钮时，切换到上一张图片。
动作：逻辑同向右切换，但索引变化为 count--。若 count == -1，则重置为 4。

var left = document.getElementById("left");
left.onclick = function (){
    bannerLi[count].className = ""
    bannerLi[count].style.opacity = 0
    list[count].style.backgroundColor = "white"

    if (--count == -1){ count = 4 }

    bannerLi[count].className = "current-banner"
    bannerLi[count].style.opacity = 1
    list[count].style.backgroundColor = "red"
}

第6步：绑定圆点鼠标悬停事件

目的：当鼠标经过任意圆点时，立即切换至对应的图片。
动作：遍历所有圆点 list，为每个圆点绑定 onmouseenter 事件。在事件中：

将当前显示的圆点和图片状态复位（背景变白，图片透明）。
将鼠标所在的圆点 i 及其对应的图片 bannerLi[i] 设为高亮可见。
更新全局变量 count = i，以保持状态同步。

for (let i = 0; i < list.length; i++) {
    list[i].onmouseenter= function (){
        list[count].style.backgroundColor = "white"
        list[i].style.backgroundColor = "red"
        bannerLi[count].className = ""
        bannerLi[count].style.opacity = 0
        bannerLi[i].className = "current-banner"
        bannerLi[i].style.opacity = 1
        count = i
    }
}