原生JavaScript实现图片切换

Html

<div id="div">
	<img class="on"  src="img/1.png" alt="">
	<span class="prev"><</span>
	<span class="next">></span>
	<ul>
		<li class="active"></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>

css

	*{
		padding: 0;
		margin: 0;
	}
	#div{
		position: relative;
		width: 300px;
		height: 300px;
		padding: 10px 10px 30px 10px;
		background: #ccc;
		text-align: center;
		margin:200px auto auto auto;
		color: #fff;
		font-weight: bold;
	}
	img{
		display: none;
		float: left;
		width: 300px;
		height: 300px;
	}
	.on{
		display: block;
	}
	span{
		width: 30px;
		height: 30px;
		cursor: pointer;
	}
	.prev{
		position: absolute;
		left: 10px;
		top: 50%;
	}
	.next{
		position: absolute;
		right: 10px;
		top: 50%;
	}
	ul{
		position: absolute;
		left: 37%;
		bottom: 10px;
		width: 100%;
	}
	ul li{
		float: left;
		list-style: none;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		background: #fff;
		margin-right: 12px;
		cursor: pointer;
	}
	.active{
		background: bisque;
	}

JavaScript

window.οnlοad=	function e() {
	var Img = document.getElementsByTagName("img")[0];
	var prev = document.getElementsByClassName("prev")[0];
	var next = document.getElementsByClassName("next")[0];
	var Li = document.getElementsByTagName("li");
	var arrUrl = ["img/1.png","img/2.png","img/3.png","img/4.png"];
	var iNow = 0;
	function change() {
		for(var i=0;i<Li.length;i++){
			Li[i].className='';
		}
		Li[iNow].className='active';
		Img.src=arrUrl[iNow];
	}
	for (var i = 0; i < Li.length; i++) {
		Li[i].index = i;
		Li[i].onclick = function () {
			iNow=this.index;
			change();
		}
	}
	prev.onclick = function () {
		iNow --;
		if (iNow ==-1) {
			iNow = Li.length - 1;
		}
		change();
	};
	next.onclick = function () {
		iNow ++;
		if (iNow == Li.length) {
			iNow = 0;
		}
		change();
	};
}