JS 控制网页轮播图片的自动,按钮,导航原点转换

效果如下图

<script type="text/javascript">
    //实现进入轮播区域，显示按钮

 //banner-item是div大盒子里面的id
    var bannerItem = document.getElementById("banner-item"); 

   //获取轮播图片、轮播按钮、轮播导航点三部分 但是有四个ul  

  var bannerItems = bannerItem.getElementsByTagName("ul");   

  var bannerNav = bannerItems[0];   

 var bannerImage = bannerItems[1]; 

   var bannerBtn = bannerItems[2];   

 var bannerDotted = bannerItems[3];   

 //当鼠标进入轮播区域时，显示轮播按钮ul区域   

 //添加鼠标悬停事件   

 bannerItem.onmouseover = function(){    

    bannerBtn.style.display = "block";    };  

  bannerItem.onmouseout = function(){   

     bannerBtn.style.display = "none";    };  

  //点击按钮实现图片切换  

  //获取到每一个按钮，图片列表和导航圆点列表  

  //SHs数组永远是从零开始的    

var preBtn = bannerBtn.getElementsByTagName("li")[0];  

  var nextBtn = bannerBtn.getElementsByTagName("li")[1];  

  var bannerImages = bannerImage.getElementsByTagName("li");   

 var bannerDotteds = bannerDotted.getElementsByTagName("li");   

 //下标计数器   

 var _index = 0;   

 //添加点击事件    preBtn.onclick = function(){   

     //上一张        

//根据下标来改变图片的显示      

  _index--;     

   if(_index<0){    

        _index = 6;  

      }       

 changeImg(_index);    };  

  //下一张图片 

   nextBtn.onclick = function(){       

 //根据下标来改变图片的显示   

     //++xunhuxunha循环      

  _index++;      

  if(_index>6){         

   _index = 0;      

 }       

 changeImg(_index);    };  

  //导航点悬停控制图片   

 for(var i=0;i<bannerDotteds.length;i++)

{        bannerDotteds[i].index = i;       

 bannerDotteds[i].onmouseover = function(){          

  changeImg(this.index);      

      _index = this.index;     

   }    }    

//时间循环自动切换   

 var mySi = setInterval(function(){    

    _index++;   

     if(_index>6){   

         _index=0;        }      

  changeImg(_index);    },5000);   

 //切换图片与导航点样式   

 function changeImg(index){       

 //清除其他li的类名   

     for(var i=0;i<bannerImages.length;i++){       

     bannerImages[i].className = "";        

    bannerDotteds[i].className = "";        }     

   //通过类名的修改来改变样式     

   bannerImages[index].className = "show";  

      bannerDotteds[index].className = "red-dotted";    }</script>