老师点击事件有问题，麻烦帮忙看下谢谢

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="1-8.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="main" id="main">
<!-轮播图片-->
<div class="auto" id="auto">
<a href="#">
<div class="auto-img img1 auto-active"></div>
</a>
<a href="#">
<div class="auto-img img2"></div>
</a>
<a href="#">
<div class="auto-img img3"></div>
</a>
</div>
<!-轮播图片箭头-->
<a href="" class="arrow prev" id="prev"></a>
<a href="" class="arrow next" id="next"></a>
<!-轮播图片圆点-->
<div class="dots" id="dots">
<a href="" class="dots-active"></a>
<a href=""></a>
<a href=""></a>
</div>
</div>
<script src="1-8.js" type="text/javascript"></script>

</body>
</html>

*{
margin:0;
padding:0;
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
/*整个轮播区*/
.main{
width: 1200px;
height: 400px;
margin:0 auto;
position: relative;
}
/*轮播图片*/
.auto{
width: 1200px;
height: 400px;
margin:0 auto;
position: relative;
overflow: hidden;
}
.auto .auto-img{
width: 1200px;
height: 400px;
position: absolute;
overflow: hidden;
display: none;
}
.auto .img1{
background: url("img/bg1.jpg") no-repeat;
}
.auto .img2{
background: url("img/bg2.jpg") no-repeat;
}
.auto .img3{
background: url("img/bg3.jpg") no-repeat;
}
/*轮播图片默认显示*/
.auto .auto-active{
display:block;
}
/*轮播区箭头*/
.arrow{
display: block;
width:30px;
height: 50px;
background:url("img/arrow.png") no-repeat center center;
position: absolute;
top:50%;
left: 250px;
margin-top: -25px;
}
.arrow:hover{
background-color:rgba(0,0,0,0.5);
}
/*轮播区箭头下一张*/
.next{
left: auto;
right:0;
}
/*轮播区箭头上一张*/
.prev{
transform:rotate(180deg);
}
/*轮播区圆点*/
.dots{
position: absolute;
right: 20px;
bottom:10px;
}
.dots a{
display: inline-block;
width: 8px;
height: 8px;
border-radius: 8px;
border: 2px solid rgba(255,255,255,0.5);
background:rgba(0,0,0,0.4);
margin-left: 5px;
}
.dots .dots-active{
background:white;
border:2px solid rgba(0,0,0,0.4);
}

/**
* Created by xie on 2018/12/14.
*/
/*1、图片自动轮播
* 2、鼠标滑过图片轮播停止，鼠标离开继续轮播
* 3、鼠标点击箭头切换图片
* 4、鼠标点击圆点切换图片*/

/*封装一个获取id的函数*/
function byId(id) {
return typeof (id)==="string"?document.getElementById(id):id;
}
//全局变量
var index=0,//索引
timer=null, //轮播函数变量
img=byId("auto").getElementsByTagName("div"), //获取图片数组
len=img.length,//获取图片数组长度
dots=byId("dots").getElementsByTagName("a"),//获取圆点数组
prev=byId("prev"),
next=byId("next");

/*封装图片轮播函数*/
function autoImg() {
var main = byId("main");
/*封装鼠标划过函数*/
main.onmouseover=function(){
//清楚轮播函数调用
clearInterval(timer);
};
/*封装鼠标移出函数，鼠标移除后，开始轮播*/
main.onmouseout=function(){
/*图片轮播函数*/
timer=setInterval(function(){
index++;
//当索引大于图片个数时，索引为0
if(index>=len){
index=0;
}
//调用图片切换函数
changeImg();
},2000);
};
//页面打开时自动调用轮播
main.onmouseout();

//点击圆点切换图片
for(var d=0;d<len;d++){
dots[d].id=d;//设置dots圆点的id为d（0，1，2）
dots[d].onclick=function () {
index=this.id;//使index等于dots圆点的id
//调用图片切换函数
changeImg();
}
}
//上一张点击事件
prev.onclick=function () {
index++;
if(index>=len){
index=0;
}
//调用图片切换函数
changeImg()
}
//下一张点击事件
next.onclick=function () {
index++;
if(index>=len){
index=0;
}
//调用图片切换函数
changeImg()
}
}
//图片切换函数
function changeImg() {
//遍历轮播图片
for(var i=0;i<len;i++){
img[i].style.display="none";
dots[i].className="";
}
img[index].style.display="block";
dots[index].className="dots-active";
}
//调用图片轮播函数
autoImg();