JS实现轮播图（一看就懂逻辑清晰）(js轮播图视频教程)

JS实现轮播图（一看就懂逻辑清晰）

推荐整理分享JS实现轮播图（一看就懂逻辑清晰）(js轮播图视频教程)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:js如何实现轮播图,js轮播图视频教程,js实现轮播图代码,js实现轮播图原理,js实现轮播图效果,js轮播图实现简单代码,js实现轮播图原理,js实现轮播图效果,内容如对您有帮助，希望把文章链接给更多的朋友！

轮播图有很多种实现方法，这是其中一种最清晰的方法。思路很清晰，代码很简单，欢迎大佬多指教。

先来看下效果图，嫌麻烦就不用具体图片来实现了，主要是理清思路。（自动轮播，左右按钮切换图片，小圆点切换图片，鼠标移入暂停轮播，鼠标移出继续轮播）

 HTML

首先是html内容，布局很简单，一个图片列表，一个点列表，两个按钮。注意data-index使用HTML5中的data-xx属性来嵌入自定义数据（下面JS代码会提到）。记得给默认显示的图片和对应的小圆点加上active类哦。

<div class="wrap"> <ul class="list"> <li class="item active">0</li> <li class="item">1</li> <li class="item">2</li> <li class="item">3</li> <li class="item">4</li> </ul> <ul class="pointList"> <li class="point active" data-index = 0></li> <li class="point" data-index = 1></li> <li class="point" data-index = 2></li> <li class="point" data-index = 3></li> <li class="point" data-index = 4></li> </ul> <button class="btn" id="leftBtn"> < </button> <button class="btn" id="rightBtn"> > </button> </div>CSS 

思路：父容器list相对定位，item绝对定位，实现让所有图片重叠在父容器内。利用z-index来设置图片高度，图片高度最高会显示在顶层上。那么整个容器中，左右切换按钮和小圆点始终要在最顶层，不能被图片覆盖，所以他们的z-index一定要比图片高。active是一个样式，给某张图片绑定这个样式就能在最上层显示。然后就是图片切换的渐变效果，opacity完全不透明到透明，再加个transition动画效果。最后就是cursor给小圆点添加“小手指”，其他就没什么好说的了。

<style> .wrap { width: 800px; height: 400px; position: relative; } .list { width: 800px; height: 400px; position: relative; padding-left: 0px; } .item { width: 100%; height: 100%; list-style: none; position: absolute; left: 0; opacity: 0; transition: all .8s; } .item:nth-child(1) { background-color: skyblue; } .item:nth-child(2) { background-color: yellowgreen; } .item:nth-child(3) { background-color: rebeccapurple; } .item:nth-child(4) { background-color: pink; } .item:nth-child(5) { background-color: orange; } .item.active { z-index: 10; opacity: 1; } .btn { width: 60px; height: 100px; z-index: 100; top: 150px; position: absolute; } #leftBtn { left: 0px; } #rightBtn { right: 0px; } .pointList { list-style: none; padding-left: 0px; position: absolute; right: 20px; bottom: 20px; z-index: 200; } .point { width: 10px; height: 10px; background-color: antiquewhite; border-radius: 100%; float: left; margin-right: 8px; border-style: solid; border-width: 2px; border-color: slategray; cursor: pointer; } .point.active{ background-color: cadetblue; } </style>Javascript 

Index可以说是整个代码里面的"核心"，先封装一个清除active的方法，这里面要清除图片的active（显示在最上层），比如切换到下一张图上张图的active就要清除。还有point的active（图片对应小圆点改变样式）。然后goIndex这个方法就是给图片和对应的小圆点同时加上active，左右按钮绑定的方法就不说了。

用getAttribute拿到刚才给li标签绑定的data-index属性，绑定图片index = pointindex，就能实现点击小圆点图片切换了。由于上面goIndex方法早已经绑定好了给图片添加active样式的时候也给小圆点添加的样式了，就可以实现图片切换小圆点跟随变化的效果。

<script> var items = document.querySelectorAll(".item");//图片节点 var points = document.querySelectorAll(".point")//点 var left = document.getElementById("leftBtn"); var right = document.getElementById("rightBtn"); var all = document.querySelector(".wrap") var index = 0; var time = 0;//定时器跳转参数初始化 //封装一个清除active方法 var clearActive = function () { for (i = 0; i < items.length; i++) { items[i].className = 'item'; } for (j = 0; j < points.length; j++) { points[j].className = 'point'; } } //改变active方法 var goIndex = function () { clearActive(); items[index].className = 'item active'; points[index].className = 'point active' } //左按钮事件 var goLeft = function () { if (index == 0) { index = 4; } else { index--; } goIndex(); } //右按钮事件 var goRight = function () { if (index < 4) { index++; } else { index = 0; } goIndex(); } //绑定点击事件监听 left.addEventListener('click', function () { goLeft(); time = 0;//计时器跳转清零 }) right.addEventListener('click', function () { goRight(); time = 0;//计时器跳转清零 }) for(i = 0;i < points.length;i++){ points[i].addEventListener('click',function(){ var pointIndex = this.getAttribute('data-index') index = pointIndex; goIndex(); time = 0;//计时器跳转清零 }) } //计时器轮播效果 var timer; function play(){ timer = setInterval(() => { time ++; if(time == 20 ){ goRight(); time = 0; } },100) } play(); //移入清除计时器 all.onmousemove = function(){ clearInterval(timer) } //移出启动计时器 all.onmouseleave = function(){ play(); } </script>

总结：这个简单的轮播图实现例子是第一次写最容易理解，逻辑最清晰的一种。下面我把完整的代码块放出来，直接复制粘贴就可以运行。

<!DOCTYPE html><html><head> <style> .wrap { width: 800px; height: 400px; position: relative; } .list { width: 800px; height: 400px; position: relative; padding-left: 0px; } .item { width: 100%; height: 100%; list-style: none; position: absolute; left: 0; opacity: 0; transition: all .8s; } .item:nth-child(1) { background-color: skyblue; } .item:nth-child(2) { background-color: yellowgreen; } .item:nth-child(3) { background-color: rebeccapurple; } .item:nth-child(4) { background-color: pink; } .item:nth-child(5) { background-color: orange; } .item.active { z-index: 10; opacity: 1; } .btn { width: 60px; height: 100px; z-index: 100; top: 150px; position: absolute; } #leftBtn { left: 0px; } #rightBtn { right: 0px; } .pointList { list-style: none; padding-left: 0px; position: absolute; right: 20px; bottom: 20px; z-index: 200; } .point { width: 10px; height: 10px; background-color: antiquewhite; border-radius: 100%; float: left; margin-right: 8px; border-style: solid; border-width: 2px; border-color: slategray; cursor: pointer; } .point.active{ background-color: cadetblue; } </style></head><body> <div class="wrap"> <ul class="list"> <li class="item active">0</li> <li class="item">1</li> <li class="item">2</li> <li class="item">3</li> <li class="item">4</li> </ul> <ul class="pointList"> <li class="point active" data-index = 0></li> <li class="point" data-index = 1></li> <li class="point" data-index = 2></li> <li class="point" data-index = 3></li> <li class="point" data-index = 4></li> </ul> <button class="btn" id="leftBtn"> < </button> <button class="btn" id="rightBtn"> > </button> </div> <script> var items = document.querySelectorAll(".item");//图片 var points = document.querySelectorAll(".point")//点 var left = document.getElementById("leftBtn"); var right = document.getElementById("rightBtn"); var all = document.querySelector(".wrap") var index = 0; var time = 0;//定时器跳转参数初始化 //清除active方法 var clearActive = function () { for (i = 0; i < items.length; i++) { items[i].className = 'item'; } for (j = 0; j < points.length; j++) { points[j].className = 'point'; } } //改变active方法 var goIndex = function () { clearActive(); items[index].className = 'item active'; points[index].className = 'point active' } //左按钮事件 var goLeft = function () { if (index == 0) { index = 4; } else { index--; } goIndex(); } //右按钮事件 var goRight = function () { if (index < 4) { index++; } else { index = 0; } goIndex(); } //绑定点击事件监听 left.addEventListener('click', function () { goLeft(); time = 0;//计时器跳转清零 }) right.addEventListener('click', function () { goRight(); time = 0;//计时器跳转清零 }) for(i = 0;i < points.length;i++){ points[i].addEventListener('click',function(){ var pointIndex = this.getAttribute('data-index') index = pointIndex; goIndex(); time = 0;//计时器跳转清零 }) } //计时器 var timer; function play(){ timer = setInterval(() => { time ++; if(time == 20 ){ goRight(); time = 0; } },100) } play(); //移入清除计时器 all.onmousemove = function(){ clearInterval(timer) } //移出启动计时器 all.onmouseleave = function(){ play(); } </script></body></html>

创作不易，觉得有帮助的话请留下一个赞谢谢~