简单轮播图效果

body部分

<div class="box">
   <img class="apper" src="img/1.jpg" >
   <img src="img/4.jpg" >
   <img src="img/5.jpg" >
   <p class="left_move">
    <
   </p>
   <p class="right_move">
    >
   </p>
   <div class="shift_1" id='hei' name="shift"></div>
   <div class="shift_2" name="shift"></div>
   <div class="shift_3" name="shift"></div>
  </div>

js部分

<script type="text/javascript">
   var oRm=document.getElementsByClassName('right_move')
   var oRl=document.getElementsByClassName('left_move');
   var arrImg=document.getElementsByTagName('img');
   var arrSf=document.getElementsByName('shift');
   var oBox=document.getElementsByClassName('box');
   var j=0;
   oRm[0].onclick=right;
   function right(){
    j=j+1;
    if(j==arrImg.length){
     j=0;
    }
    for(var i=0;i<arrImg.length;i++){
     arrImg[i].className='';
     arrSf[i].id='';
     }
     arrImg[j].className='apper';
     arrSf[j].id='hei'   
   }
   
   oRl[0].onclick=function(){
    j=j-1;
    if(j<0){
     console.log(arrImg.length);
     j=arrImg.length-1;
    }
    for(var i=0;i<arrImg.length;i++){     //循环清空原效果
     arrImg[i].className='';
     arrSf[i].id='';
     }
     arrImg[j].className='apper';         //给下一级添加效果
     arrSf[j].id='hei';
     // console.log(j)
     
   }
   for(var x=0;x<arrSf.length;x++){
   arrSf[x].index=x;
   arrSf[x].onmouseover=function(){  
    for(var i=0;i<arrImg.length;i++){
     arrImg[i].className='';
     arrSf[i].id='';
     }
     arrImg[this.index].className='apper';
     this.id='hei';
     j=this.index;
   }
  }
   var Time=setInterval(right,2000)        //添加计时器实现自动轮播效果
    oBox[0].onmouseover=function(){  //移入清除自动轮播效果
     clearInterval(Time);
    }
    oBox[0].onmouseout=function(){     //移出继续自动轮播效果
      Time=setInterval(right,2000);
    }
  </script>