js實現圖片輪播圖（一）

一.實現原理

    （1）將全部圖片放在一個父容器div裏面，經過display屬性來設置圖片的出現與隱藏；

    （2）輪播圖分爲手動輪播和自動輪播；

        手動輪播的重點是每次點擊圖片下方的小圓圈，得到它的索引號，並讓與之對應索引號的圖片顯示，而且此時的小圓圈爲高亮顯示；

        自動輪播：利用定時器setInterval()，來每隔必定的時間來播放一次圖片。

    （3）全部的基礎知識：dom操做，定時器，事件運用。

二.輪播圖頁面佈局：     

<div id="content">   <!-- 總的父容器 -->

      <div class="carousel-inner">  <!-- 包含圖片的容器 -->
      	    <div class="item "><img src="./img/lunbo1.jpg" alt="第一張圖片"></div>
            <div class="item"><img src="./img/lunbo2.jpg" alt="第二張圖片"></div>
            <div class="item"><img src="./img/lunbo3.jpg" alt="第三張圖片"></div>
      </div>
      
  	 <!-- 圖片下方的指示圓圈-->
  	 <ul class="carousel-indicators">
  	 	<li id='pic1'>●</li>
  	 	<li id='pic2'>●</li>
  	 	<li id='pic3'>●</li>
  	 </ul>
  	 
  	 <!-- 圖片左右方來回滾動圖片的左右箭頭-->
  	 <a href="#" class="carousel-control prev"><span><</span></a>
  	 <a href="#"  class="carousel-control next"><span>></span></a>
  	 
  </div>

三.輪播圖的css樣式：

   #content{
    width: 100%;
    height:500px;
    position: relative;
}
.carousel-inner{
    position: relative;
    width: 100%;
    overflow: hidden; 
    height:500px; 
}

.carousel-inner>.item>img{
   display: block; 
    line-height: 1;   
    z-index: 1;
}

.carousel-indicators{
    position: absolute;
    bottom:10px;
    left:45%;
    z-index: 2;
    list-style-type: none;
}
.carousel-indicators li{
    display:inline-block;
    padding: 0 15px;
    font-size: 24px;
    color:#999;    
    cursor: pointer;
    z-index: 2;
      
}
 .active1{
    font-size: 28px;
    color:#fff;
}
.carousel-control{
    position: absolute;
    text-decoration:none;
    color: #999;
    font-weight: bold;
    opacity: .5;
    font-size: 40px;
    z-index: 3;

}
.carousel-control:hover{
    color:fff;
    text-decoration: none;
    opacity: .9;
    outline: none;
    font-size: 42px;
}

.prev{
    top: 30%;   
    left:20px; 
}
.next{
    top:30%;
    right: 20px;
}

四.輪播圖的js實現代碼：

window.onload = function(){
	
	//輪播初始化
	  var lunbo  = document.getElementById('content');
	  var imgs = lunbo.getElementsByTagName('img');	 
	  var uls = lunbo.getElementsByTagName('ul');
          var lis = lunbo.getElementsByTagName('li');

      //初始狀態下，一個圓圈爲高亮模式

	      lis[0].style.fontSize = '26px';
	      lis[0].style.color = '#fff';

	  //定義一個全局變量，用來進行自動輪播圖片順序的變化
	      var pic_index = 1;

	 //自動輪播.使用pic_time記錄播放，能夠隨時使用clearInterval()清除掉。
	     var pic_time =  setInterval(autobofang,3000);

       //手動輪播
	    for(var i=0;i<lis.length;i++){      	
      	    lis[i].addEventListener("mouseover",change,false);

            }
     
    
      function change(event){  

             var event=event||window.event;
             var target=event.target||event.srcElement; 
             var children = target.parentNode.children;           
		  	 for(var i=0;i<children.length;i++){
		  	 	 if(target == children[i]){	  		     
		  		        picChange(i);   
		  		   }              
              
		  			
		  	  }
  	     } 
  	     //圖片切換函數
  	     function picChange(i){   

  	     	//讓全部圖片都不顯示，全部圓圈都爲普通樣式	
  	     	for(var j=0;j<imgs.length;j++){
		  		    imgs[j].style.display = 'none';		           	                            lis[j].style.fontSize = '24px';
		  		    lis[j].style.color = '#999';
		  		}

             //讓選中的索引的圖片顯示，對應的圓圈高亮  
		   imgs[i].style.display = 'block'; 	  		   	   	
		   lis[i].style.fontSize = '26px';
		   lis[i].style.color = '#fff';		   	  
		  		   	 
  	     }
         
         //自動播放的事件處理
	     function autobofang(){
	     	
	     	if(pic_index >= lis.length){
	    		pic_index = 0;
	    	}

	    		change1(pic_index);
	    		pic_index++;
	      }
	     //自動播放的圖片轉化中的事件
	    function change1(index){	  	 		
                  
		  	 picChange(index);

                  //鼠標移入ul標籤，自動播放圖片暫停

		  	  uls[0].addEventListener("mouseover",pause,false);

		   //鼠標移出ul標籤，自動播放圖片繼續

		  	  uls[0].addEventListener("mouseout",go,false);
		  	       
		}
       
       //自動播放暫停函數

       function pause(event){
       	    var event=event||window.event;
            var target=event.target||event.srcElement;
            switch(target.id){
            	case "pic1":
                    
                    clearInterval(pic_time);          
                    

            	break;
            	case "pic2":
                        
                      clearInterval(pic_time);
            	  

            	break;
            	case "pic3":
                    
            	     clearInterval(pic_time);
                     

            	break;
            }
       	   
       }
     
        //自動播放圖片繼續函數

         function go(event){
       	    var event=event||window.event;
            var target=event.target||event.srcElement;                  
            switch(target.id){
            	case "pic1":
                       
            	      pic_index = 1;  
            	      pic_time =  setInterval(autobofang,3000);
		  	         

            	break;
            	case "pic2":

                   pic_index = 2;                     
                   pic_time = setInterval(autobofang,3000);

            	break;
            	case "pic3":

            	    pic_index = 3;            	     
                    pic_time = setInterval(autobofang,3000);           	

            	break;
            }
       	   
       }
       }

五.效果圖：

六.遇到的問題與不足

    問題：當鼠標第一次移入ul標籤時，自動輪播圖片中止，鼠標移出，自動輪播繼續，可是隨着運行，輪播圖片的變化速度愈來愈快，並且這時點擊ul標籤已經不起做用了。     

    問題緣由：在後面中止輪播後再次輪播開始使用定時器的時候，沒有給賦值給pic_time來記錄，也就沒有再次鼠標移到ul標籤而清除定時器，所以致使再次點擊ul標籤不能暫停自動輪播播放，並且速度 愈來愈快。

    不足：沒有實現相似淘寶輪播圖那樣平滑過渡的無現滾動的效果，左右箭頭的指示做用也沒有完成。這些在後期會繼續學習，繼續來完善，來分享.