不知道为什么无法实现时间设置

来源：1-13 作业题

慕用0863198

2018-12-20 22:21:50

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">	
	<title>CSS布局</title>
<link rel="stylesheet" type="text/css" href="css/style.css">		
</head>
<body>
<div class="main" id="main">
	
	<div class="tu" id="tu">
		<a href=""><div class="tu-item item1 tu-active"></div></a>
		<a href=""><div class="tu-item item2"></div></a>
		<a href=""><div class="tu-item item3"></div></a>
		<a href=""><div class="tu-item item4"></div></a>
		<a href=""><div class="tu-item item5"></div></a>
	    <div class="button prev"></div>
	    <div class="button next"></div>
	    <div class="dots">
		   <span class="dots-active"></span>
		   <span></span>
		   <span></span>
		   <span></span>
		   <span></span>
	    </div>
	</div>
	
</div>
 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
 <script type="text/javascript">
 var index=0;len=$('span').length,timer=null;
$(function(){
	//封装图片切换函数
function changeImg(){
            for(var i=0;i<len;i++){$('.tu-item').eq(i).removeClass('tu-active');$('span').eq(i).removeClass('dots-active');};
                                   $('.tu-item').eq(index).addClass('tu-active');$('span').eq(index).addClass('dots-active');
                         };
    //为前后切换按钮绑定事件
$('.prev').click(function(){
                           index--;if (index<0) {index=len-1};changeImg() 
                           });
$('.next').click(function(){
                           index++;if (index>len-1) {index=0};changeImg() 
                           });
//为圆点绑定事件
$('span').click(function () {
	                       var q=$('span').index(this);index=q;
	                       changeImg();
                            });
//设置定时器
$('.main').mouseout(function(){
                           timer=setInterval(function(){index++;if(index>length-1){index=0};changeImg()},2000);
                              })
//清除定时器
$('.main').mouseout(function(){
                            if (timer) {clearInterval(timer);}
                              });
});

</script>
</body>
</html>

*{padding: 0;margin: 0;font-family: "Microsoft YaHei";}

.main{width:1200px;height:660px;margin:60px auto;overflow: hidden;}

.tu{width: 1200px;height: 450px;overflow: hidden;position: relative;}

.tu-item{width: 1200px;height: 450px;background-repeat: no-repeat;position: absolute;display: none;}

.tu-active{display: block;}

.item1{background-image: url("../img/1.jpg");}

.item2{background-image: url("../img/2.jpg");}

.item3{background-image: url("../img/3.jpg");}

.item4{background-image: url("../img/4.jpg");}

.item5{background-image: url("../img/5.jpg");}

.button{

position: absolute;