js轮播实现

var banner=document.querySelectorAll('.banner>ul>li>a>img');
var point=document.querySelectorAll('.banner>p>span');
var timer;
var i=0;

    function play(){
      timer=setInterval(function(){
            banner[i].style.display='none';
            point[i].style.background='#8b8b8b';
            i++;
            if(i>1){
                i=0;
            }
            banner[i].style.display='block';
            point[i].style.background='#ff8800
        },2000)
    }
 play();

    
    //给box添加鼠标移入移出事件
    var box=document.querySelector('.banner>ul');
    box.onmouseover=function(){
        clearInterval(timer);
    }
   box.onmouseout=function(){
        play();
    }

          
//点击圆点切换
   
   for(var j=0;j<point.length;j++){
       point[j].index=j;
       point[j].onclick=function(){
           var nu=this.index;
           for(var b=0;b<point.length;b++){
               banner[b].style.display='none';
               point[b].style.background='#8b8b8b';
           }
           banner[nu].style.display='block';
           point[nu].style.background="#ff8800";
       }
   }