当前位置：首页 > 全部内容 > 正文

JavaScript 实现轮播图：从原理到完整代码

作者：交互手记

时间：2026-10-25

浏览：243

本文详细讲解如何使用原生 JavaScript 实现一个功能完整的轮播图组件。内容涵盖核心思路、动画函数的封装原理（含步长计算与计时器管理）、手动点击切换逻辑、左右箭头导航以及自动播放功能的实现。通过分步解析与完整代码示例，帮助开发者掌握前端交互开发的常见技巧。

文章目录

本文将介绍如何利用原生 JavaScript 实现一个功能完整的轮播图效果，供开发者参考与学习。

思路

1. 首先获取页面中需要用到的 DOM 元素。


<div class="all" id='box'>
        <div class="screen">
            <!-- 无序列表 -->
            <ul> 
                <li><img src="./wf1.jpg" width="500" height="200" /></li>
                <li><img src="./wf2.jpg" width="500" height="200" /></li>
                <li><img src="./wf3.jpg" width="500" height="200" /></li>
                <li><img src="./wf4.jpg" width="500" height="200" /></li>
                <li><img src="./wf5.jpg" width="500" height="200" /></li>
            </ul>
            <!-- 有序列表 -->
            <ol>
 
            </ol>
        </div>
        <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
</div>

2. 实现点击导航按钮时，图片切换到对应位置，同时当前按钮高亮显示，其余按钮恢复默认样式。

思路

3. 为轮播图添加左右方向键，支持手动切换上一张和下一张图片。

思路

4. 实现轮播图的自动播放功能，无需用户交互即可循环展示图片。

思路

操作

1. 获取页面元素，并准备实现轮播图所需的核心功能逻辑。

1. 获取关键的 DOM 节点，包括用于展示图片的 ul 列表、用于点击导航的 ol 列表以及左右切换按钮 nth。


var ul=document.querySelector('ul')
var ol=document.querySelector('ol')
var nth=document.querySelector('#arr')
var box=document.querySelector('#box')
var left=document.querySelector('#left')
var  right=document.querySelector('#right')

2. 封装一个通用的动画函数，供后续切换图片时调用。


 // 进行位置动画封装调用
        function animate(element,offset,setp,times){
                    // 判断为true则删除，防止多个触发
                    if(element.jsq){
                        clearInterval(element.jsq)
                    }
                    // 获取当前offset
                    var position=ul.offsetLeft
                    // 判定如果移动位置小于现在的位置，则步长为负数
                    if(offset<position){
                        setp=-setp
                    }
                    // 开启间隙定时器
                    if(Math.abs(position-offset)>Math.abs(setp)){
                        element.jsq=setInterval(() => {
                        position+=setp
                        element.style.left=position+'px'
                        // 判断要是现在的位值和预订的位置相差不超过一步长，则停止计时器
                        if(Math.abs(position-offset)<Math.abs(setp)){
                            clearInterval(element.jsq)
                            element.style.left=offset+'px'
                        }
                    }, times);
                    }
                }

动画函数的实现步骤如下：

1. 在函数执行时，检查目标元素是否已存在计时器。若存在，则先清除旧计时器，防止多个动画计时器并存导致冲突。

2. 判断目标移动位置与当前位置的关系：若目标位置大于当前位置，则步长 setp 设为正值；若小于当前位置，则步长设为负值（取反）。

3. 开启新的计时器，按照设定的步长逐步移动元素位置。

4. 当当前位置与目标位置的差值绝对值小于步长时，停止计时器，并将元素位置直接设定为目标位置，以防止因步长剩余距离不足导致的反复横跳或位置不准。

2. 为 ol 列表添加子元素及点击事件，实现图片切换与按钮样式同步变化。


for(var i=0;i<ul.children.length;i++){
        var li=document.createElement('li')
            li.innerHTML=i+1
            // 给每一个li设置上自定义属性
            li.setAttribute('a',i)
            ol.appendChild(li)
            // 给ol下面每一个li设置点击事件
            ol.children[i].onclick=function(){
                // 循环所以li进行排他思想
                for(var i=0;i<ol.children.length;i++){
                    ol.children[i].className=''
                }
                // 给当前点击的元素添加上class属性
                this.className='current'
                // 获取到当前点击li的自定属性的值看看是点击到第几张
                var index=this.getAttribute('a')
                console.log(index)
                // 查看照片每一张的宽度
                var imgwidth=ul.children[0].offsetWidth
                // 根据宽度乘上第几张得出该移动多少
                offset=index*-imgwidth
                // 调用动画函数
                animate(ul,offset,50,30)

1. 根据 ul 中图片的数量，使用 for 循环动态创建相同数量的 ol 子项（按钮）。利用 setAttribute('a', i) 为每个按钮设置自定义属性 a，值为对应的索引 i，以便后续获取当前点击的是第几张图片。


for(var i=0;i<ul.children.length;i++){
        var li=document.createElement('li')
            li.innerHTML=i+1
            // 给每一个li设置上自定义属性
            li.setAttribute('a',i)
            ol.appendChild(li)
}

2. 在循环中为每个按钮绑定点击事件。采用“排他思想”：点击当前按钮时，先清除所有按钮的样式（className 置空），再给当前点击的按钮添加高亮类名（如 'current'）。


for(var i=0;i<ul.children.length;i++){
        var li=document.createElement('li')
            li.innerHTML=i+1
            // 给每一个li设置上自定义属性
            li.setAttribute('a',i)
            ol.appendChild(li)
 
        //新
            // 给ol下面每一个li设置点击事件
            ol.children[i].onclick=function(){
                // 循环所以li进行排他思想
                for(var i=0;i<ol.children.length;i++){
                    ol.children[i].className=''
                }
                // 给当前点击的元素添加上class属性
                this.className='current'

3. 获取当前点击按钮的自定义属性 a 的值（即索引 index），计算 ul 需要移动的距离。偏移量 offset = -index * 单张图片宽度。注意加上负号，因为 ul 是向左移动而非视口向右移动。最后调用之前封装的 animate 函数执行动画。


for(var i=0;i<ul.children.length;i++){
        var li=document.createElement('li')
            li.innerHTML=i+1
            // 给每一个li设置上自定义属性
            li.setAttribute('a',i)
            ol.appendChild(li)
            // 给ol下面每一个li设置点击事件
            ol.children[i].onclick=function(){
                // 循环所以li进行排他思想
                for(var i=0;i<ol.children.length;i++){
                    ol.children[i].className=''
                }
                // 给当前点击的元素添加上class属性
                this.className='current'
 
        //新
                // 获取到当前点击li的自定属性的值看看是点击到第几张
                var index=this.getAttribute('a')
                console.log(index)
                // 查看照片每一张的宽度
                var imgwidth=ul.children[0].offsetWidth
                // 根据宽度乘上第几张得出该移动多少
                offset=index*-imgwidth
                // 调用动画函数
                animate(ul,offset,50,30)

实现上述逻辑后，点击导航按钮即可看到图片平滑切换及按钮样式变化的效果。

思路

3. 为轮播图添加上一张、下一张按钮的功能。

（此处省略 CSS 样式代码，最终会提供完整样式。初始状态下左右箭头按钮是隐藏的，激活后显示。）

1. 由于之前已获取过相关元素，此处直接复用。为左右按钮分别绑定点击事件处理函数。


// 鼠标进入事件
    box.onmousemove=function(){
        nth.style.display='block'
    }   
    // 鼠标离开事件
    box.onmouseleave=function(){
        nth.style.display='none'
    }

2. 在事件处理函数中，维护一个当前图片索引变量。点击“下一张”时索引加 1，点击“上一张”时索引减 1。然后复用之前实现的点击切换逻辑（如直接调用 ol.children[index].click()，注意需去掉 'on' 前缀并加上括号执行）。


for(var i=0;i<ul.children.length;i++){
        var li=document.createElement('li')
            li.innerHTML=i+1
            // 给每一个li设置上自定义属性
            li.setAttribute('a',i)
            ol.appendChild(li)
            // 给ol下面每一个li设置点击事件
            ol.children[i].onclick=function(){
                // 循环所以li进行排他思想
                for(var i=0;i<ol.children.length;i++){
                    ol.children[i].className=''
                }
                // 给当前点击的元素添加上class属性
                this.className='current'
                // 获取到当前点击li的自定属性的值看看是点击到第几张
                var index=this.getAttribute('a')
                console.log(index)
                // 查看照片每一张的宽度
                var imgwidth=ul.children[0].offsetWidth
                // 根据宽度乘上第几张得出该移动多少
                offset=index*-imgwidth
                // 调用动画函数
                animate(ul,offset,50,30)

                 //  新
                // 点击事件，index为当前点击的序号的自定义类名的值
                left.onclick=function(){
                if(index>0){
                    index--
                }
                ol.children[index].click()
                }
                right.onclick=function(){
                
                    if(index<4){
                        index++
                    }
                ol.children[index].click()
                }
 
            }               
}

由于点击事件内部定义的变量在外部作用域难以直接访问，此处选择在事件处理函数内部直接编写切换逻辑，或复用已有的点击触发机制。

注意：在事件处理函数中调用其他元素的点击事件时，需使用 element.click() 方法，并记得加上小括号以立即执行。

3.在没有触发ol.onclick（没有点击下边的1,2,3,4,5）的时候，点击左右是不起效果的，所以在script上要添加一段代码


var Click=0
 
    right.onclick=function(){
        Click++
        if(Click==1){
          ol.children[1].click()
        }
    }

完成以上步骤后，左右切换功能即告完成。

4. 实现轮播图的自动播放功能。


// 自动移动
    // 1.首先我们要在一开始的时候给第一个按钮添加颜色
    ol.children[0].className='current'
    // 2.开启计时器每5秒切换一次
    setInterval(function(){
        var position=ul.offsetLeft         
        var imgwidth=ul.children[0].offsetWidth         
        var indexs=Math.abs(position/imgwidth)
        //3. 获取现在的位置，和图片的长度，相除得到下标
        if(indexs>3){
            indexs=-1
        }
        ol.children[indexs+1].click()
        // 跳转的时候一定要加1
        },5000)

1. 在页面加载初始时，手动触发第一个按钮的点击事件，使其高亮显示，并清除其他按钮的高亮状态（排他思想）。

2. 设置一个定时器，每隔一定时间自动触发“下一张”的逻辑。需要注意的是，索引跳转时需加 1；当播放到最后一张时，下一张应回到第一张（索引为 0），此时逻辑上可能涉及索引 -1 后加 1 的操作，需确保边界处理正确。

通过上述设置，即可实现轮播图的自动循环播放效果。

整体代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            border: 0;
        }
 
        .all {
            width: 500px;
            height: 200px;
            padding: 7px;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }
 
        .screen {
            width: 500px;
            height: 200px;
            overflow: hidden;
            position: relative;
        }
 
        .screen li {
            width: 500px;
            height: 200px;
            overflow: hidden;
            float: left;
        }
 
        .screen ul {
            position: absolute;
            left: 0;
            top: 0px;
            width: 3000px;
        }
 
        .all ol {
            position: absolute;
            right: 10px;
            bottom: 10px;
            line-height: 20px;
            text-align: center;
        }
 
        .all ol li {
            float: left;
            width: 20px;
            height: 20px;
            background: #fff;
            border: 1px solid #ccc;
            margin-left: 10px;
            cursor: pointer;
        }
 
        .all ol li.current {
            background: yellow;
        }
 
        #arr {
            display: none;
            z-index: 1000;
 
        }
 
        #arr span {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #000;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-family: '黑体';
            font-size: 30px;
            color: #fff;
            opacity: 0.3;
            border: 1px solid #fff;
        }
 
        #arr #right {
            right: 5px;
            left: auto;
        }
    </style>
</head>
<body>
    <div class="all" id='box'>
        <div class="screen">
            <!-- 无序列表 -->
            <ul> 
                <li><img src="./wf1.jpg" width="500" height="200" /></li>
                <li><img src="./wf2.jpg" width="500" height="200" /></li>
                <li><img src="./wf3.jpg" width="500" height="200" /></li>
                <li><img src="./wf4.jpg" width="500" height="200" /></li>
                <li><img src="./wf5.jpg" width="500" height="200" /></li>
            </ul>
            <!-- 有序列表 -->
            <ol>
 
            </ol>
        </div>
        <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
    </div>
    <script>
        // 进行位置动画封装调用
        function animate(element,offset,setp,times){
                    // 判断为true则删除，防止多个触发
                    if(element.jsq){
                        clearInterval(element.jsq)
                    }
                    // 获取当前offset
                    var position=ul.offsetLeft
                    // 判定如果移动位置小于现在的位置，则步长为负数
                    if(offset<position){
                        setp=-setp
                    }
                    // 开启间隙定时器
                    if(Math.abs(position-offset)>Math.abs(setp)){
                        element.jsq=setInterval(() => {
                        position+=setp
                        element.style.left=position+'px'
                        // 判断要是现在的位值和预订的位置相差不超过一步长，则停止计时器
                        if(Math.abs(position-offset)<Math.abs(setp)){
                            clearInterval(element.jsq)
                            element.style.left=offset+'px'
                        }
                    }, times);
                    }
                }
    //  1.获取元素
    var ul=document.querySelector('ul')
    var ol=document.querySelector('ol')
    var nth=document.querySelector('#arr')
    var box=document.querySelector('#box')
    var left=document.querySelector('#left')
    var  right=document.querySelector('#right')
    // 2.ol中添加点击元素
    // 在ol循环添加li
    for(var i=0;i<ul.children.length;i++){
        var li=document.createElement('li')
            li.innerHTML=i+1
            // 给每一个li设置上自定义属性
            li.setAttribute('a',i)
            ol.appendChild(li)
            // 给ol下面每一个li设置点击事件
            ol.children[i].onclick=function(){
                // 循环所以li进行排他思想
                for(var i=0;i<ol.children.length;i++){
                    ol.children[i].className=''
                }
                // 给当前点击的元素添加上class属性
                this.className='current'
                // 获取到当前点击li的自定属性的值看看是点击到第几张
                var index=this.getAttribute('a')
                console.log(index)
                // 查看照片每一张的宽度
                var imgwidth=ul.children[0].offsetWidth
                // 根据宽度乘上第几张得出该移动多少
                offset=index*-imgwidth
                // 调用动画函数
                animate(ul,offset,50,30)
                // 点击事件，index为当前点击的序号的自定义类名的值
                left.onclick=function(){
                if(index>0){
                    index--
                }
                ol.children[index].click()
                }
                right.onclick=function(){
                
                    if(index<4){
                        index++
                    }
                ol.children[index].click()
                }
            }               
    }
 // 鼠标进入事件
    box.onmousemove=function(){
        nth.style.display='block'
    }   
    // 鼠标离开事件
    box.onmouseleave=function(){
        nth.style.display='none'
    }
     //鼠标右边点击事件
     var Click=0
 
    right.onclick=function(){
 
        Click++
 
        if(Click==1){
 
          ol.children[1].click()
 
        }
 
    }
 
    
 
// 自动移动
    // 1.首先我们要在一开始的时候给第一个按钮添加颜色
    ol.children[0].className='current'
    // 2.开启计时器每5秒切换一次
    setInterval(function(){
        var position=ul.offsetLeft         
        var imgwidth=ul.children[0].offsetWidth         
        var indexs=Math.abs(position/imgwidth)
        //3. 获取现在的位置，和图片的长度，相除得到下标
        if(indexs>3){
            indexs=-1
        }
        ol.children[indexs+1].click()
        // 跳转的时候一定要加1
        },5000)
    </script>
</body>
</html>

请注意修改代码中的图片路径以匹配实际资源。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印，自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式，预览压缩前后的大小。

使用 ›
作者最新文章

JS怎么实现页面强制刷新

点击JS链接直接运行不下载？前端实现.js文件强制下载的三种方法

怎么封装一个通用的JS创建元素辅助函数

Swiper.js 怎么监听滑动结束并获取当前索引

HTML、CSS和JS的关系：Web前端三件套怎么协作

相关文章
热门文章
更多
CSS text-transform与JS修改首字母大写的适用场景区别
JS中constructor属性判断数组存在哪些风险
JS正则替换中$1捕获组引用与字符串重组技巧
全栈开发中JavaScript与Java怎么协作？前后端技术栈配合解析
Node.js后端生成高强度随机字符串的方法
怎么在本地运行JavaScript脚本：Node.js下载安装与环境配置教程
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
JS 解压出现乱码或报错怎么解决？
JavaScript常见SyntaxError语法错误排查与修复方法
JavaScript实现按钮点击冷却时间的完整代码示例