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>