【js 轮播图】

效果图：

html样式：

<div id="box">
			<img src="img/0.jpg" id="pir"/>	
			<ul id="but">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
			<div id="left"><</div>
			<div id="right">></div>
		</div>

css样式：

*{
				margin: 0;
				padding: 0;
			}
			#box{
				width: 1000px;
				height: 350px;
				border:1px solid #ddd;
				margin:0 auto;
				position: relative;
			}
			img{
				width: 100%;
				height: 100%;
			}
			#but{
				width: 160px;
				height: 20px;
				position: absolute;
				bottom: 5%;
				left: 45%;
				list-style: none;
			}
			#but li{
				float: left;
				width: 25px;
				height: 25px; 
				background: antiquewhite;
				border-radius: 50%;
				margin-right: 10px;
				text-align: center;
				line-height: 25px;
				cursor: pointer;
			}
			#left,#right{
				font-size: 60px;
				position: absolute;
				top: 30%;
				width: 0px;
				height: 100px;
				background:#EEE8AA;
				line-height: 100px;
				overflow: hidden;
				transition: .5s;
				cursor: pointer;
			}
			#left{left:10px;}
			#right{right: 10px;}

　javasecipt效果：

<script type="text/javascript">
			var box =document.getElementById("box");
			var Img = document.getElementById("pir");
			var lis = document.getElementsByTagName("li");
			var Left = document.getElementById("left");
			var Right = document.getElementById("right");
			var index = 0;
			lis[0].style.backgroundColor = "darksalmon";
//			定时器
			var timer = setInterval(banner,2000);
			
			function banner(){
				index++;
				if(index == 4){
					index = 0;
				}
				Img.src = "img/"+index+".jpg";
				resetbg();
				lis[index].style.backgroundColor = "darksalmon";
			}
			function resetbg(){
				for(var i=0;i<lis.length;i++){
					lis[i].style.backgroundColor = "antiquewhite";
				}
			}
			for(var i=0;i<lis.length;i++){
				lis[i].onclick = function(){
					index = this.innerHTML - 1;
					Img.src = "img/"+index+".jpg";
					resetbg();
					lis[index].style.backgroundColor = "darksalmon";
				}
			}
			box.onmousemove = function(){
				clearInterval(timer);
				Left.style.width = Right.style.width ="50px";
			}
			box.onmouseout = function(){
				timer = setInterval(banner,2000);
				Left.style.width = Right.style.width ="0px";
			}
			Left.onclick = function(){
				index--;
				if(index == -1){
					index = 3;
				}
				Img.src = "img/"+index+".jpg";
				resetbg();
				lis[index].style.backgroundColor = "darksalmon";
			}
			Right.onclick = function(){
				index++;
				if(index == 4){
					index = 0;
				}
				Img.src = "img/"+index+".jpg";
				resetbg();
				lis[index].style.backgroundColor = "darksalmon";
			}
		</script>