JavaScript書寫的banner圖滑動效果

<script type="text/javascript">
			//封裝擷取id的方法
			function byId(id) {
				return typeof(id) === 'string' ? document.getElementById(id) : id;
			}
           

//開始腳本
			//封裝banner圖的滑動函數
			var index = 0,
				timer = null;
			var pics = byId('banner').getElementsByTagName('div');
			var len = pics.length;
			var dots = byId('dots').getElementsByTagName('span');
			var prev = byId('prev'),
				next = byId('next')


			function sliderImg() {
				var main = byId('main');
				main.onmouseover = function() {
					//清除定時器
					if(timer) {
						clearInterval(timer)
					}
				}
				main.onmouseout = function() {
					timer = setInterval(function() {
						index++;
						if(index >= len) {
							index = 0;
						}
						//切換圖檔,  調用切換圖檔的函數 
						changeImg();
					}, 2000)
				}


				//自動在main上出發滑鼠離開的事件
				main.onmouseout();
				//點選圓點切換圖檔
				for(var d = 0; d < len; d++) {
					dots[d].id = d;
					dots[d].onclick = function() {
						//改變index為目前sapn的索引
						index = this.id;
						this.className = 'active'
						changeImg();
					}
				}
				next.onclick = function() {
					index++;
					if(index >= len) {
						index = 0
					}
					changeImg();
				}
				prev.onclick = function() {
					index--;
					if(index < 0) {
						index = len - 1;
					}
					changeImg();
				}
			}


			//封裝切換圖檔
			function changeImg() {
				for(var i = 0; i < len; i++) {
					pics[i].style.display = 'none';
					dots[i].className = "";
				}


				pics[index].style.display = 'block';
				dots[index].className = "active";
			}


			sliderImg();
		</script>