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>