利用JS实现基本的图片轮播功能，包括鼠标的经过事件

来源：互联网发布：网络舆情是什么编辑：程序博客网时间：2024/04/30 13:38

注意：

本代码只是参考代码，全是在本地的数据，并没有和后台服务器进行交互，不过有些地方还是一样的。可以作为参考

html部分：

<div id="lb"><img src="img/1462962491.jpg"  id="img"/><ul><li class="over" onmouseover="gameOver(0)" onmouseout="myGo()">1</li><li onmouseover="gameOver(1)" onmouseout="myGo()">2</li><li onmouseover="gameOver(2)" onmouseout="myGo()">3</li><li onmouseover="gameOver(3)" onmouseout="myGo()">4</li><li onmouseover="gameOver(4)" onmouseout="myGo()">5</li></ul></div>

css部分:

* {margin: 0;padding: 0;box-sizing: border-box;}#myDiv {width: 700px;height: 200px;position: relative;}ul {list-style: none;position: absolute;right: 10px;bottom: 0;}#myDiv li {width: 15px;height: 15px;border-radius: 50%;background: indianred;display: inline-block;font-size: 12px;line-height: 15px;text-align: center;}#myDiv .over {background: greenyellow;}

js部分:

var arr = ["1462962491.jpg", "1463397325.jpg", "1464682081.jpg", "1465979482.jpg", "1466266404.jpg"];var myDiv = document.getElementById("myDiv");var myImg = document.getElementById("myImg");var arrLi = myDiv.getElementsByTagName("li");var n = 0;var t = setInterval(fun, 1000);function fun() {for(var i = 0; i < arrLi.length; i++) {arrLi[i].className = "";}myImg.src = "img/" + arr[n];arrLi[n].className = "over";n++;if(n > arr.length - 1) {n = 0;}}function myGame(v){clearInterval(t);//当鼠标经过(放在)li上的时候停止轮播myImg.src="img/"+arr[v];//鼠标经过(放在)那个li上就显示那张图片//所有li都是红色for(var i=0;i<arrLi.length;i++){arrLi[i].className="";}arrLi[v].className="over";//鼠标经过(放在)那个li时那个li变成黄色//下面代码是为了当鼠标离开时能够在下一张图片继续滑动而不是在第一张开始if(n==4){n=0;}else{n=v+1;}}function myGo(){t=setInterval(fun,1000);}

0 0