原始JS写轮播图 轮播图切换（类似选项卡）+dom操作+定时器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0; font-size: 16px; } ul{ list-style: none; margin: 0; padding: 0; } img{ vertical-align: middle; } #banner{ width: 830px; height: 482px; margin: 100px auto; position: relative; } #banner li{ /* display: none; */ opacity: 0; position: absolute; left: 0; top: 0; transition: .5s; } #banner li.active{ /* display: block; */ opacity: 1; } .leftBtn, .rightBtn{ width: 30px; height: 64px; position: absolute; top: 50%; margin-top: -32px; background-image: url(images/index.png); cursor: pointer; display: none; } .leftBtn{ left: 20px; background-position: -82px -145px; } .leftBtn:hover{ background-position: -161px -145px; } .rightBtn{ right: 20px; background-position: -120px -145px; } .rightBtn:hover{ background-position: -198px -145px; } .circle{ width: 100%; position: absolute; bottom: 20px; text-align: center; font-size: 0; } .circle span{ display: inline-block; width: 20px; height: 20px; background: #fff; background: url(images/index.png) -26px -100px; cursor: pointer; margin: 0 5px; } .circle span.active{ background: url(images/index.png) 0 -100px; } </style> </head> <body> <div id="banner"> <ul class="img"> <li class="active"><a href="#"><img src="images/01.png" alt=""></a></li> <li><a href="#"><img src="images/02.png" alt=""></a></li> <li><a href="#"><img src="images/03.png" alt=""></a></li> <li><a href="#"><img src="images/04.png" alt=""></a></li> <li><a href="#"><img src="images/05.png" alt=""></a></li> <li><a href="#"><img src="images/06.png" alt=""></a></li> <li><a href="#"><img src="images/07.png" alt=""></a></li> <li><a href="#"><img src="images/08.png" alt=""></a></li> </ul> <div class="leftBtn"></div> <div class="rightBtn"></div> <div class="circle"> <span class="active"></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </div> <script> var banner=document.querySelector('#banner'); var lis=document.querySelectorAll('#banner li'); var spans=document.querySelectorAll('.circle span'); var leftBtn=document.querySelector('.leftBtn'); var rightBtn=document.querySelector('.rightBtn'); var cn=0; //当前次点击对应的索引 var ln=0; //上一次选中的图片对应的索引 for(var i=0;i<spans.length;i++){ spans[i].index=i; spans[i].onclick=function(){ cn=this.index; /* //console.log(this.index); lis[ln].className=''; lis[cn].className='active'; spans[ln].className=''; spans[cn].className='active'; //lis[ln].className=spans[ln].className=''; //lis[cn].className=spans[cn].className='active'; ln=cn; //当前次点击的索引相对于下一次点击来说就是上一次的索引 */ change(); }; } function change(){ lis[ln].className=spans[ln].className=''; lis[cn].className=spans[cn].className='active'; ln=cn; } leftBtn.onclick=function(){ cn--; if(cn<0){ cn=lis.length-1; } change(); }; rightBtn.onclick=function(){ cn++; if(cn>lis.length-1){ cn=0; } change(); }; var timer=setInterval(rightBtn.onclick,2000); banner.onmouseover=function(){ leftBtn.style.display=rightBtn.style.display="block"; clearInterval(timer); }; banner.onmouseout=function(){ leftBtn.style.display=rightBtn.style.display="none"; timer=setInterval(rightBtn.onclick,2000); }; </script> </body> <html>  微信小程序轮播图代码 ```javascript <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000"> <block wx:for="{{movies}}" wx:key="index"> <swiper-item> <image src="{{item.url}}" class="goodimg" mode="aspectFill"/> </swiper-item> </block> </swiper> 