免费学习推荐：javascript视频教程
使用原生js实现轮播图
今天分享一个使用原生js实现轮播图的案例，并且配上比较详细的过程讲解，欢迎小伙伴的浏览和批评指正。静态效果图如下：
核心思想
将一些图片在一行中平铺，然后计算偏移量再利用定时器实现定时轮播。
步骤：
1. 首先搭建基本的html结构
<!-- 结构部分 --><!-- 结构说明：外层一个container盒子，用于放图片盒子（imgbox）、左箭头、右箭头、底部小圆圈， 图片盒子中放的是轮播的图片 --> <p class="container"> <!-- 注意：此处强调一下，图片盒子imgbox的left属性必须写成行内样式，否则js中拿不到left的值 --> <p class="imgbox" style="left: -500px;"> <img src="./images/lunbo1.jpg" alt="轮播图1"> <img src="./images/lunbo2.jpg" alt="轮播图2"> <img src="./images/lunbo3.jpg" alt="轮播图3"> <img src="./images/lunbo4.jpg" alt="轮播图4"> <img src="./images/lunbo5.jpg" alt="轮播图5"> </p> <a href="javascript:;" class="leftarrow" style="display: none;"> <img src="./images/leftarrow.png" alt="左箭头"> </a> <a href="javascript:;" class="rightarrow" style="display: none;"> <img src="./images/rightarrow.png" alt="右箭头"> </a> <ul class="circlefather"> <li class="select"></li> <li></li> <li></li> <li></li> <li></li> </ul> </p>
2. 样式部分
使用绝对定位把左右箭头和底部小圆圈放在合适的位置。外层容器盒子的宽度等于一张图片的宽度，图片盒子的宽度为所有图片宽度之和，所有图片左浮动，实现水平排列。
☆☆☆注意：此处强调一下，图片盒子imgbox的left属性必须写成行内样式，否则js中拿不到left的值
<style> /* 内联样式表 */ * { margin: 0; padding: 0; } li { list-style: none; } /* 外层容器样式 */ .container { height: 330px; width: 500px; //外层容器盒子的宽度等于一张图片的宽度 margin: 100px auto; position: relative; overflow: hidden; //超出隐藏 } /* 左右箭头样式 */ .container .leftarrow, .container .rightarrow { position: absolute; top: 50%; transform: translate(0, -50%); z-index: 1; } .container .leftarrow { left: 5px; } .container .rightarrow { right: 5px; } /* 图片盒子样式 */ .imgbox { position: absolute; transition: all 0.5s; height: 333px; width: 3500px; //图片盒子的宽度为所有图片宽度之和 } .imgbox img { height: 330px; width: 500px; float: left; //所有图片左浮动，实现水平排列 } /* 底部小圆圈样式 */ .circlefather { position: absolute; bottom: 10px; left: 50%; transform: translate(-50%, 0); } .circlefather li { float: left; height: 10px; width: 10px; margin: 0 5px; border: 2px solid #e7641c; border-radius: 50%; } .select { background-color: #e7641c; } </style>
3. js逻辑部分
3.1 首先实现点击左右箭头向左右滑动的功能
var container = document.queryselector('.container') //获取外层容器盒子 var imgbox = document.queryselector('.imgbox') //获取图片盒子 var leftarrow = document.queryselector('.leftarrow') //获取左箭头 var rightarrow = document.queryselector('.rightarrow') //获取右箭头 //给左箭头绑定点击事件 leftarrow.onclick = function() { golast() } //右箭头点击事件 rightarrow.onclick = function() { gonext() } // 显示上一张图片 // 1.点一次左箭头，就让left值-500，点一次右箭头，就让left值+500 // 2.但是有两种特殊情况，（1）当前展示图片1时，点击左箭头则需展示图片5，（2）当前展示图片5时，点击右箭头则需展示图片1 function golast() { let newboxleft if (imgbox.style.left === '0px') { newboxleft = -2000 } else { // imgbox.style.left是一个字符串，所以要转化为数字才能进行计算，而设定left时就要加上px成为一个字符串 newboxleft = parseint(imgbox.style.left) + 500; } imgbox.style.left = newboxleft + "px" } // 显示下一张图片 function gonext() { let newboxleft if (imgbox.style.left === '-2000px') { newboxleft = 0 } else { newboxleft = parseint(imgbox.style.left) - 500; } imgbox.style.left = newboxleft + "px" }
此时效果图如下：
3.2 实现自动轮播功能在定时器中每1500毫秒调用一次gonext方法，实现自动切换图片
// 使用setinterval()定时器实现自动切换功能 var timer function autochange() { timer = setinterval(gonext, 1500) } autochange()
3.3 实现鼠标悬停在图片上时，停止自动切换，停留在当前图片，移出时继续自动切换 // 监听鼠标移入事件和移出事件，实现鼠标悬停在图片上时，停止自动切换，停留在当前图片, // 鼠标移出时继续自动切换 container.addeventlistener('mouseenter', function() { clearinterval(timer) }) container.addeventlistener('mouseleave', autochange)
此处补充一个小插曲：
一开始我监听的是mouseout事件，但是在测试时发现鼠标移出container盒子时会多次触发mouseout事件，导致多次调用autochange函数，开启了多个定时器，出现图片切换混乱的情况，查了一下mouseout事件和mouseleave事件的区别：
mouseover和mouseout在父元素和其子元素都可以触发，当鼠标穿过一个元素时，触发次数得依子元素数量而言。mouseenter和mouseleave只在父元素触发，当鼠标穿过一个元素时，只会触发一次。mouseover和mouseout比mouseenter和mouseleave先触发简单来说就是：
mouseout在所选区域内，从父元素到子元素也算移出触发。
mouseleave，在所选区域，不管有没有子元素，移出才会触发。
3.4实现底部小圆圈跟随图片同步切换实现原理：可以根据imgbox的left值，推算出第几个小圆圈被选中，绝对值就是小圆圈的索引值，放张图帮助理解（字有点丑，请忽略，嘻嘻。。）
在golast()函数和gonext()函数中就可以计算/计算出被选中小圆圈的索引
var index = 0 // 定义index变量，表示第几个小圆圈被选中 function golast() { let newboxleft if (imgbox.style.left === '0px') { newboxleft = -2000 } else { // imgbox.style.left是一个字符串，所以要转化为数字才能进行计算，而设定left时就要加上px成为一个字符串 newboxleft = parseint(imgbox.style.left) + 500; } imgbox.style.left = newboxleft + "px" index = math.abs(newboxleft / 500) //计算出被选中小圆圈的索引 } function gonext() { let newboxleft if (imgbox.style.left === '-2000px') { newboxleft = 0 } else { newboxleft = parseint(imgbox.style.left) - 500; } imgbox.style.left = newboxleft + "px" index = math.abs(newboxleft / 500) ///计算出被选中小圆圈的索引 }
完成3.2、3.3和3.4之后的效果图如下：
3.5实现点击底部某个小圆圈时切换成对应的图片// 实现点击底部某个小圆圈时切换成对应的图片 (function clickcircle() { let circlearr = document.getelementsbytagname('li') for (let j = 0; j < circlearr.length; j++) { circlearr[j].addeventlistener('click', () => { index = j selectcircle() imgbox.style.left = -(index * 500) + "px" }) } })() //函数自调用写法，格式：(函数)()
效果图如下：
到此为止，轮播图的功能都实现了，但是作为一个强迫症，发现自动切换的时候，显示左右箭头并不好看，所以再做一点小小的调整。
3.6补充实现鼠标悬停在图片上时，显示左右箭头，移出时隐藏左右箭头//给左右箭头默认隐藏<a href="javascript:;" class="leftarrow" style="display: none;"> <img src="./images/leftarrow.png" alt="左箭头"></a><a href="javascript:;" class="rightarrow" style="display: none;"> <img src="./images/rightarrow.png" alt="右箭头"></a>
在监听鼠标事件中，改为以下代码
// 监听鼠标移入事件和移出事件，实现鼠标悬停在图片上时，停止自动切换，停留在当前图片,鼠标移出时继续自动切换 container.addeventlistener('mouseenter', function() { clearinterval(timer) leftarrow.style.display = "inline" rightarrow.style.display = "inline" }) container.addeventlistener('mouseleave', function() { autochange() leftarrow.style.display = "none" rightarrow.style.display = "none" })
效果图：
到这就结束了哦，整理不易，喜欢就点赞收藏吧！
欢迎访问个人博客歌洞章
下面是完整代码。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原生js实现轮播图——小肉包</title> <style> /* 内联样式表 */ * { margin: 0; padding: 0; } li { list-style: none; } /* 外层容器样式 */ .container { height: 330px; width: 500px; margin: 100px auto; position: relative; overflow: hidden; } /* 左右箭头样式 */ .container .leftarrow, .container .rightarrow { position: absolute; top: 50%; transform: translate(0, -50%); z-index: 1; width: 32px; height: 32px; } .container .leftarrow { left: 5px; } .container .rightarrow { right: 5px; } /* 图片盒子样式 */ .imgbox { position: absolute; /* transition: all 0.5s; */ height: 333px; width: 3500px; } .imgbox img { height: 330px; width: 500px; float: left; } /* 底部小圆圈样式 */ .circlefather { position: absolute; bottom: 10px; left: 50%; transform: translate(-50%, 0); } .circlefather li { float: left; height: 10px; width: 10px; margin: 0 5px; border: 2px solid #e7641c; border-radius: 50%; } .select { background-color: #e7641c; } </style></head><body> <!-- 结构部分 --> <!-- 结构说明：外层一个container盒子，用于放图片盒子（imgbox）、左箭头、右箭头、底部小圆圈， 图片盒子中放的是轮播的图片 --> <p class="container"> <!-- 注意：此处强调一下，图片盒子imgbox的left属性必须写成行内样式，否则js中拿不到left的值 --> <p class="imgbox" style="left: 0px;"> <!-- <img src="./images/lunbo5.jpg" alt="轮播图5"> --> <img src="./images/lunbo1.jpg" alt="轮播图1"> <img src="./images/lunbo2.jpg" alt="轮播图2"> <img src="./images/lunbo3.jpg" alt="轮播图3"> <img src="./images/lunbo4.jpg" alt="轮播图4"> <img src="./images/lunbo5.jpg" alt="轮播图5"> <!-- <img src="./images/lunbo1.jpg" alt="轮播图1"> --> </p> <a href="javascript:;" class="leftarrow" style="display: none;"> <img src="./images/leftarrow.png" alt="左箭头"> </a> <a href="javascript:;" class="rightarrow" style="display: none;"> <img src="./images/rightarrow.png" alt="右箭头"> </a> <ul class="circlefather"> <li class="select"></li> <li></li> <li></li> <li></li> <li></li> </ul> </p> <!-- javascript部分 --> <script type="text/javascript"> var container = document.queryselector('.container') //获取外层容器盒子 var imgbox = document.queryselector('.imgbox') //获取图片盒子 var leftarrow = document.queryselector('.leftarrow') //获取左箭头 var rightarrow = document.queryselector('.rightarrow') //获取右箭头 var index = 0 // 定义index变量，表示第几个小圆圈被选中 //给左箭头绑定点击事件 leftarrow.onclick = function() { golast() } //右箭头点击事件 rightarrow.onclick = function() { gonext() } // 显示上一张图片 // 1.点一次左箭头，就让left值-500，点一次右箭头，就让left值+500 // 2.但是有两种特殊情况，（1）当前展示图片1时，点击左箭头则需展示图片5，（2）当前展示图片5时，点击右箭头则需展示图片1 function golast() { let newboxleft if (imgbox.style.left === '0px') { newboxleft = -2000 } else { // imgbox.style.left是一个字符串，所以要转化为数字才能进行计算，而设定left时就要加上px成为一个字符串 newboxleft = parseint(imgbox.style.left) + 500; } imgbox.style.left = newboxleft + "px" index = math.abs(newboxleft / 500) //计算第几个小圆圈被选中 selectcircle() } // 显示下一张图片 function gonext() { let newboxleft if (imgbox.style.left === '-2000px') { newboxleft = 0 } else { newboxleft = parseint(imgbox.style.left) - 500; } imgbox.style.left = newboxleft + "px" index = math.abs(newboxleft / 500) selectcircle() } // 使用setinterval()定时器实现自动切换功能 function autochange() { timer = setinterval(gonext, 1500) } autochange() // 监听鼠标移入事件和移出事件，实现鼠标悬停在图片上时，停止自动切换，停留在当前图片,鼠标移出时继续自动切换 container.addeventlistener('mouseenter', function() { clearinterval(timer) leftarrow.style.display = "inline" rightarrow.style.display = "inline" }) container.addeventlistener('mouseleave', function() { autochange() leftarrow.style.display = "none" rightarrow.style.display = "none" }) //实现底部小圆圈跟随图片同步切换 function selectcircle() { //获取所有的小圆圈伪数组 let circlearr = document.getelementsbytagname('li') for (let i = 0; i < circlearr.length; i++) { circlearr[i].classname = "" } circlearr[index].classname = 'select' } // 实现点击底部某个小圆圈时切换成对应的图片 (function clickcircle() { let circlearr = document.getelementsbytagname('li') for (let j = 0; j < circlearr.length; j++) { circlearr[j].addeventlistener('click', () => { index = j selectcircle() imgbox.style.left = -(index * 500) + "px" }) } })() //函数自调用写法，格式：(函数)() </script></body></html>
相关免费学习推荐：javascript（视频）
以上就是实现原生js实现轮播图的详细内容。