js编写轮播图效果

本文实例为大家分享了js实现轮播图效果的具体代码，供大家参考，具体内容如下

1、html部分

<div id='box'> <ul> <li class='show'><img src='https://www.haobala.com/bcjs/img/1.jpg' alt=''></li> <li><img src='https://www.haobala.com/bcjs/img/2.jpg' alt=''></li> <li><img src='https://www.haobala.com/bcjs/img/3.jpg' alt=''></li> <li><img src='https://www.haobala.com/bcjs/img/4.jpg' alt=''></li> <li><img src='https://www.haobala.com/bcjs/img/5.jpg' alt=''></li> <li><img src='https://www.haobala.com/bcjs/img/6.jpg' alt=''></li> </ul> <img src='https://www.haobala.com/bcjs/img/l.png' alt='' id='lef'> <img src='https://www.haobala.com/bcjs/img/r.png' alt='' id='rig'> <ol> <li data-i = '0'></li> <li data-i = '1'></li> <li data-i = '2'></li> <li data-i = '3'></li> <li data-i = '4'></li> <li data-i = '5'></li> </ol></div>

2、js部分

<script> var liList = document.querySelectorAll('#box ul li') var olList = document.querySelectorAll('#box ol li') var rig = document.getElementById('rig') var lef = document.getElementById('lef') var index = 0 function setLi(){ for(var i = 0;i <liList.length;i++){liList[i].className = ''olList[i].className = '' } liList[index].className = 'show' olList[index].className = 'focus' } // 向右 rig.onclick = function(){ if(index !== 5){index++ } if(index === 5){index = 0 } setLi() } //向左 lef.onclick = function(){ if(index !== 0){index-- } if(index === 0){index = 5 } setLi() } //圆点 for(var i = 0;i < olList.length;i++){ olList[i].onclick = function(){ index = this.getAttribute('data-i') setLi() } } //计时 var autoPlay = setInterval( function(){ rig.click() },3000) //鼠标划上停止播放 var box = document.querySelector('div') box.onmouseenter = function(){ clearInterval(autoPlay) } // 鼠标移走继续播放 box.onmouseleave = function(){ autoPlay = setInterval( function(){ rig.click() },3000) }</script>

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