想要鼠标放在圆点上的时候切换图片，怎么弄呀

			var timer='';
			var index=0;
			var banner=document.getElementById('top_wrap');
			var li=banner.getElementsByTagName('li');
			var a=banner.getElementsByTagName('div');
			var main=document.getElementById('banner');
			var len=a.length;
			for(var i=0; i<li.length; i++){
				li[i].index=i;
				li[i].onmouseover=function(){
					for(var i=0;i<li.length; i++){
						li[i].className='';
					}this.className='bg';
					for(var i=0; i<a.length; i++){
						a[i].className='active';
					}a[this.index].className='';
				}
		}
			function changeimg(){
				for(var i=0; i<a.length; i++){
					a[i].style.display='none';
				}a[index].style.display='block';
			}
			function slideimg(){
				main.onmouseover=function(){
					if(timer){
						clearInterval(timer);
					}
				}
				main.onmouseout=function(){
					timer=setInterval(function(){
						index++;
						if(index>=len){
							index=0;
						}
							changeimg();
					},2000);
				}
				main.onmouseout();
			}
			slideimg();
			
			
			
<div id="top_wrap">
		<div><img src="img/bg1.jpg"></div>
		<div class="active"><img src="img/bg2.jpg"></div>
		<div class="active"><img src="img/bg3.jpg"></div>
		<ul>
			<li class="bg"></li>
			<li></li>
			<li></li>
		</ul>
		</div>