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

注意：

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

html部分：

		<div id="lb">
			<img src="img/1462962491.jpg"  id="img"/>
			<ul>
				<li class="over" οnmοuseοver="gameOver(0)" οnmοuseοut="myGo()">1</li>
				<li οnmοuseοver="gameOver(1)" οnmοuseοut="myGo()">2</li>
				<li οnmοuseοver="gameOver(2)" οnmοuseοut="myGo()">3</li>
				<li οnmοuseοver="gameOver(3)" οnmοuseοut="myGo()">4</li>
				<li οnmοuseοver="gameOver(4)" οnmοuseοut="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);
			}