html
<!--图片轮播 Start--> <div> <div> <ul> <li><img src="https://www.jb51.net/img/img01.png"/></li> <li><img src="https://www.jb51.net/img/img2.jpg"/></li> <li><img src="https://www.jb51.net/img/img1.jpg"/></li> <li><img src="https://www.jb51.net/img/img3.jpg"/></li> <li><img src="https://www.jb51.net/img/img4.jpg"/></li> </ul> <a></a> <a></a> <ul> <li><a href="#0">1</a></li> <li><a href="#1">2</a></li> <li><a href="#2">3</a></li> <li><a href="#3">4</a></li> <li><a href="#4">5</a></li> </ul> </div> <div><img src="https://www.jb51.net/img/imgright.png"/></div> </div> <!--图片轮播 End-->
js
/*图片轮播*/ var but1 = document.getElementById("prev"); var abtn = document.getElementById("btn").getElementsByTagName("li"); //获取所有的按钮 var lis = document.getElementById('allImg').getElementsByTagName('li'); var but2 = document.getElementById("next"); var index = 0; var timer = null; but2.onclick = function() { index++; if (index > lis.length - 1) { index = 0; } setImg(index); } but1.onclick = function() { index--; if (index < 0) { index = lis.length - 1; } setImg(index); } function changeImg() { if (index == lis.length - 1) { //当到最后一张图片时 index = 0 } else { index++; //图片索引发生改变 } setImg(index); } function setImg(index) { for (j = 0; j < lis.length; j++) { lis[j].style.display = "none"; } lis[index].style.display = "block"; //按钮的样式要与图片对应 for (var i = 0; i < abtn.length; i++) { abtn[i].className = "" } abtn[index].className = "hover"; } //自动切换 timer = setInterval(changeImg, 3000); //按钮 for (var i = 0; i < abtn.length; i++) { (function() { var p = i abtn[p].onclick = function() { index = p; setImg(index); } })(); }
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
您可能感兴趣的文章: