如何使用原生js实现轮播图效果呢，现在带着大家做一个小小的例子
先说一下这次的轮播图需要实现的功能点：
1.3s自动切换图片,图片切换时提示点跟随切换
??????? 2.鼠标划到图片上，自动切换轮播图停止
??????? 3.指示点划过切换对应的图片，图片切换时提示点跟随切换
??????? 4.点击上一页下一页按钮切换图片
css代码部分
1 /*初始化浏览器默认样式*/ 2 *{ 3 ????margin: 0; 4 ????padding: 0; 5 } 6 /*sowingMap*/ 7 .sowingMap{ 8 ????width: 800px; 9 ????height: 500px;10 ????margin: 0 auto;11 ????position: relative;12 ????overflow: hidden;13 }14 /*imgPart*/15 .imgPart{16 ????width: 800px;17 ????height: 500px;18 ????position: absolute;19 }20 /*imgSwitch*/21 .imgSwitch{22 ????width: 800px;23 ????height: 500px;24 ????position: absolute;25 ????list-style: none;26 ????display: none;27 ????cursor: pointer;28 }29 .imgSwitch img{30 ????width: 100%;31 ????height: 500px;32 }33 .imgShow{34 ????display: block;35 }36 /*spotPart*/37 .spotPart{38 ????position: absolute;39 ????bottom: 0;40 ????height: 40px;41 ????left: 36%;42 }43 .spotPart p{44 ????width: 20px;45 ????height: 20px;46 ????border-radius: 100%;47 ????background-color: #fff;48 ????float: left;49 ????margin-left: 20px;50 ????cursor: pointer;51 }52 /*提示点的选中颜色*/53 .spotPart .spotColor{54 ????background-color: #f00;55 }56 /*上一张下一张切换部分*/57 .preImg , .nextImg{58 ????width: 70px;59 ????height: 70px;60 ????border-radius: 100%;61 ????background-color: rgba(255,255,255,0.5);62 ????text-align: center;63 ????line-height: 70px;64 ????font-size: 30px;65 ????color: #f5f5f5;66 ????position: absolute;67 ????top: 190px;68 ????cursor: pointer;69 ????display: none;70 }71 .preImg{72 ????left: -35px;73 ????text-indent: 25px;74 }75 .nextImg{76 ????right: -35px;77 ????text-indent: -25px;78 }html代码部分
1 <div class="sowingMap"> 2 ????<ul class="imgPart"> 3 ????????<li class="imgSwitch imgShow"><img src="img/1.jpg"/></li> 4 ????????<li class="imgSwitch"><img src="img/2.jpg"/></li> 5 ????????<li class="imgSwitch"><img src="img/3.jpg"/></li> 6 ????????<li class="imgSwitch"><img src="img/4.jpg"/></li> 7 ????????<li class="imgSwitch"><img src="img/5.jpg"/></li> 8 ????</ul> 9 ????<div class="spotPart">10 ????????<p class="spotColor"></p>11 ????????<p></p>12 ????????<p></p>13 ????????<p></p>14 ????????<p></p>15 ????</div>16 ????<div class="loopChange">17 ????????<p class="preImg"><</p>18 ????????<p class="nextImg">></p>19 ????</div>20 </div>
js代码部分
1 //定义自动轮播的定时器 2 var startLoop = null; 3 //获取所有的li 和 p标签 4 var li_v = document.querySelectorAll("li"); 5 var p_v = document.querySelectorAll(".spotPart p"); 6 var sowingMap = document.querySelector(‘.sowingMap‘); 7 var p_change = document.querySelectorAll(‘.loopChange p‘); 8 //业务1：实现3s钟自动循环切换图片,图片切换时提示点跟随切换 9 var num = 0;10 function loopSetInterval() {11 ????clearInterval(startLoop);12 ????startLoop = setInterval(function() {13 ????????for(var i = 0; i < li_v.length; i++) {14 ????????????li_v[i].setAttribute("class", "imgSwitch");15 ????????????p_v[i].setAttribute("class", " ");16 ????????}17 ????????if(num >= li_v.length - 1) {18 ????????????num = 0;19 ????????} else {20 ????????????num++;21 ????????}22 ????????li_v[num].setAttribute("class", "imgSwitch imgShow");23 ????????p_v[num].setAttribute("class", "spotColor");24 ????}, 3000);25 }26 loopSetInterval();27 28 //业务2：鼠标划到图片上，轮播图停止自动切换，划出后继续播放29 for(var i = 0; i < li_v.length; i++) {30 ????li_v[i].onmouseover = function() {31 ????????clearInterval(startLoop);32 ????}33 ????li_v[i].onmouseout = function() {34 ????????loopSetInterval();35 ????}36 }37 38 //业务三：指示点划过切换对应的图片，图片切换时提示点跟随切换39 for(var i = 0; i < p_v.length; i++) {40 ????p_v[i].index = i;41 ????p_v[i].onmouseover = function() {42 ????????clearInterval(startLoop);43 ????????for(var i = 0; i < li_v.length; i++) {44 ????????????li_v[i].setAttribute("class", "imgSwitch");45 ????????????p_v[i].setAttribute("class", " ");46 ????????}47 ????????this.setAttribute("class", "spotColor");48 ????????li_v[this.index].setAttribute("class", "imgSwitch imgShow");49 ????}50 ????p_v[i].onmouseout = function() {51 ????????loopSetInterval();52 ????}53 }54 55 //业务四：点击上一页下一页切换56 sowingMap.onmouseover = function () {57 ????for (var i=0;i<p_change.length;i++) {58 ????????p_change[i].style.display = "block"; ???????59 ????}60 }61 sowingMap.onmouseout = function () {62 ????for (var i=0;i<p_change.length;i++) {63 ????????p_change[i].style.display = "none"; ???????64 ????}65 }66 //点击切换上一张67 p_change[0].onclick = function ?() {68 ????console.log(num)69 ????for(var i = 0; i < li_v.length; i++) {70 ????????li_v[i].setAttribute("class", "imgSwitch");71 ????????p_v[i].setAttribute("class", " ");72 ????}73 ????if (num <= 0) {74 ????????num = 4;75 ????????li_v[num].setAttribute("class", "imgSwitch imgShow");76 ????????p_v[num].setAttribute("class", "spotColor");77 ????} else if(num <= 4){78 ????????li_v[num-1].setAttribute("class", "imgSwitch imgShow");79 ????????p_v[num-1].setAttribute("class", "spotColor");80 ????????num--;81 ????}82 }83 //点击切换下一张84 p_change[1].onclick = function ?() {85 ????console.log(num)86 ????for(var i = 0; i < li_v.length; i++) {87 ????????li_v[i].setAttribute("class", "imgSwitch");88 ????????p_v[i].setAttribute("class", " ");89 ????}90 ????if (num >= 4) {91 ????????num = 0;92 ????????li_v[num].setAttribute("class", "imgSwitch imgShow");93 ????????p_v[num].setAttribute("class", "spotColor");94 ????} else if(num >= 0){95 ????????li_v[num+1].setAttribute("class", "imgSwitch imgShow");96 ????????p_v[num+1].setAttribute("class", "spotColor");97 ????????num++;98 ????}99 }好了，一个原生的js代码实现轮播图效果就大功告成了，如果你想使用更简单的办法，可以参考我使用jQuery实现的轮播图效果：
https://www.cnblogs.com/qdclub/p/9782921.html
原生js实现轮播图
原文地址：https://www.cnblogs.com/qdclub/p/9787398.html