原生js的轮播图

html

<div id="wrap"> 
    <a href="" class="first"><img src="img/a.png" ></a>
    <a href=""><img src="img/a1.png"  ></a>
    <a href=""><img src="img/a2.png"  ></a>             
    <ul class="ul_index">
        <li class="redC"></li>
        <li></li>
        <li></li>
       
    </ul>
    
    <div class="left">&lt</div>
    <div class="right">&gt</div>
</div>

*{margin: 0;padding: 0;}
    li{   list-style-type: none;}
          #wrap{
        width: 100%;
        height:700px;
        margin:10px 0 auto;
        position: relative;
    }
    #wrap a{
        display: inline-block;
        width: 100%;
        height:700px;
        position: absolute;
        display: none
   
    }
    #wrap a.first{
        display: block
    }
    #wrap a img{
        width: 100%;
        height:700px;
    }
    @media only screen and (max-width:500px ) {
    	#wrap a img{
        width: 100%;
        height:600px;
    	}
    	.ul_index{position: absolute; bottom: 120px !important;}
    	.left,.right{width: 30px !important;height: 30px !important;line-height: 28px !important;}
        
    }
    .left,.right{
        width: 50px;
        height: 50px;
        border-radius:50% ;
        line-height: 45px;           
        font-size: 28px;
        background:rgba(0,0,0,0.6);
        position: absolute;
        top:50%;
        margin-top: -45px;
        color: whitesmoke;
        text-align: center;
    }
    .right:hover{font-weight: 800;}
    .left:hover{font-weight: 800;}
    .left{
        left: 50px;
    }
    .right{
        right: 50px;
    }
    ul.ul_index{
        position: absolute;
        bottom: 30px;
        left: 50%;
        margin-left: -50px;
    }
    ul.ul_index li{
        float: left;
        width: 10px;
        height: 10px;
        line-height: 10px;
        margin-left: 20px;
        text-align: center;
        background: #000000;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        color: #ffffff;
    }
  //TODO 获取对象
var wrap=document.querySelector('#wrap');
var as=wrap.querySelectorAll('a');
var left=document.querySelector('.left');
var right=document.querySelector('.right');
var ul_index=document.querySelector('.ul_index');
var lis = ul_index.querySelectorAll("li");
var xiabiao=0;

//TODO 切换图片
function changeImage(){
	as[xiabiao].style.display="none";
	xiabiao++;
	console.log("xiabiao:"+xiabiao);
	if(xiabiao==3){//既第超过最后一张时，就设置为0，既第一张）
		xiabiao=0;
}
//显示切换后的图片
as[xiabiao].style.display="block";
//改变圆点
changePoint();
}
//添加定时器
var timer=setInterval("changeImage()",2000);

function changePoint(){
	for(var i=0;i<lis.length;i++){
		if(xiabiao==i){
			lis[i].style.backgroundColor='white';
		}else{
			lis[i].style.backgroundColor='#000000';
		}
	}
}

//TODO 鼠标移入时清除定时器
wrap.onmouseenter=function(){
	clearInterval(timer);
}
//TODO 鼠标移出时开启新的定时器
wrap.onmouseleave=function(){
	timer=setInterval('changeImage()',2000);
}

for(var i=0;i<lis.length;i++){
	//鼠标移入事件
	lis[i].onmouseover=function(){
		
		as[xiabiao].style.display="none";//隐藏其他图片
		for(var j=0;j<lis.length;j++){
			if(this==lis[j]){ 
				xiabiao=j;
			}
		}
		as[xiabiao].style.display="block";
		changePoint();
	}
}

//上一张
left.onclick=function(){
	as[xiabiao].style.display="none";
	xiabiao--;
	if(xiabiao<0){
		xiabiao=3;
	}

	as[xiabiao].style.display="block";
	//改变圆点位置
	changePoint();
}
//下一张
right.onclick=function(){
	as[xiabiao].style.display="none";
	xiabiao++;
	if(xiabiao==3){
		xiabiao=0;
	}
	as[xiabiao].style.display="block";
	changePoint();
}