请老师帮忙,为什么鼠标移入和移出不行

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div id="main" class="main" >
<!-- 标题栏 -->
<div class="tab" id="tab">
<ul class="item">
<li class="li-active">首页</li>
<li>点击看看</li>
<li>会自动的</li>
<li>我的网站</li>
</ul>
</div>
<!-- banner图 -->
<div class="banner" id="banner">
<div class="slider slider1 active"></div>
<div class="slider slider2"></div>
<div class="slider slider3"></div>
<div class="slider slider4"></div>
</div>
</div>
<script type="text/javascript" src="js.js"></script>
</body>
</html>

/*定义全局样式*/
  *{
  	padding: 0;
  	margin: 0;
  	font-family: "Microsoft YaHei";
  	font-size: 18px;
  		
  }


/*整个轮播图居中显示*/
  .main{
	height: 520px;
	width:1200px;
	margin: 0 auto;
  }



/*tab*/
 .tab{
 	width: 1200px;
 	height: 60px;
 }

/*每个标题的通用样式*/
 .item{
 	list-style: none;
 	overflow: hidden;
 }

 .item li{
    float: left;
    
    font-weight: bold;
    color:#666;
    width:300px;
    height: 60px;
    line-height: 60px;
    text-align: center;
}

 .li-active{
    background-color:#ffcc00;
    border-radius: 8px;
    font-size: 22px;
}



/*banner通用样式*/
.banner{
	width: 1200;
	height: 460px;
	overflow: hidden;
}
.slider{
	width: 1200px;
	height: 460px;
	float: left;
	display: none;
}

.active{
	display: block;
}

/*插入图片*/
.slider1{
	background-image: url(img/1.jpg);
}
.slider2{
	background-image: url(img/3.jpg);
}
.slider3{
	background-image: url(img/4.jpg);
}
.slider4{
	background-image: url(img/5.jpg);
}

// 定义全局变量
var index =0, //当前显示图片的索引，默认值为0
	timer=null,
	main=byID(sss),
	li=byID(tab).getElementsByTagName("li"),
	pics=byID(banner).getElementsByTagName("div"),
	size=li.length;
	










//封装getelementbyid
function byID(id){
	return typeof(id) === "string" ? document.getElementById(id):id;
}


//封装通用的跨浏览器处理事件
function addhandler(element,type,handler){
	if(element.addEventListener){
		element.addEventListener(type,handler,false);
	}else if (element.attachEvent) {
		element.attachEvent("on"+ type,handler);
	} else{
		element["on"+type] = handler;
	}
}

//封装切换
function change(){
	//遍历所有图片以及选项
	for(var d=0;d<size;d++){
			//隐藏选项样式
			li[d].className="";
			//隐藏所有图片
			pics[d].style.display="none";
		}
		//显示选项的样式
		li[index].className="li-active";
		//显示图片
		pics[index].style.display="block";
}

//封装定时器自动轮播
function startAutoPlay(){
	timer = setInterval(function(){
		index++;
		if (index>=size) index=0;
		change();
	},1000)
}

//封装清楚定时器停止自动轮播
function stopAutoPlay(){
	if (timer) {
		clearInterval(timer);
	}
}








//选项切换
for(var i=0;i<size;i++){
	li[i].setAttribute("ids",i);
	addhandler(li[i],"click",function(){
		index =this.getAttribute("ids");
		change();
	})
}


//鼠标移入，停止轮播
addhandler(main,"mouseover",stopAutoPlay);

//鼠标移出，自动轮播
addhandler(main,"mouseout",startAutoPlay);

//自动轮播
startAutoPlay();

精慕门9185807 2019-08-20

源自：项目：JS实现轮播图特效 3-8 项目作业