js實(shí)現(xiàn)圖片輪播圖（一）

一.實(shí)現(xiàn)原理

    （1）將所有圖片放在一個(gè)父容器div里面，通過display屬性來設(shè)置圖片的出現(xiàn)與隱藏；

    （2）輪播圖分為手動(dòng)輪播和自動(dòng)輪播；

        手動(dòng)輪播的重點(diǎn)是每次點(diǎn)擊圖片下方的小圓圈，獲得它的索引號(hào)，并讓與之對(duì)應(yīng)索引號(hào)的圖片顯示，并且此時(shí)的小圓圈為高亮顯示；

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

    （3）所有的基礎(chǔ)知識(shí)：dom操作，定時(shí)器，事件運(yùn)用。

二.輪播圖頁面布局：     

<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>
  	 
  	 <!-- 圖片左右方來回滾動(dòng)圖片的左右箭頭-->
  	 <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實(shí)現(xiàn)代碼：

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

      //初始狀態(tài)下，一個(gè)圓圈為高亮模式

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

	  //定義一個(gè)全局變量，用來進(jìn)行自動(dòng)輪播圖片順序的變化
	      var pic_index = 1;

	 //自動(dòng)輪播.使用pic_time記錄播放，可以隨時(shí)使用clearInterval()清除掉。
	     var pic_time =  setInterval(autobofang,3000);

       //手動(dòng)輪播
	    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);   
		  		   }              
              
		  			
		  	  }
  	     } 
  	     //圖片切換函數(shù)
  	     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';
		  		}

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

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

                  //鼠標(biāo)移入ul標(biāo)簽，自動(dòng)播放圖片暫停

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

		   //鼠標(biāo)移出ul標(biāo)簽，自動(dòng)播放圖片繼續(xù)

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

       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;
            }
       	   
       }
     
        //自動(dòng)播放圖片繼續(xù)函數(shù)

         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;
            }
       	   
       }
       }

五.效果圖：

六.遇到的問題與不足

    問題：當(dāng)鼠標(biāo)第一次移入ul標(biāo)簽時(shí)，自動(dòng)輪播圖片停止，鼠標(biāo)移出，自動(dòng)輪播繼續(xù)，但是隨著運(yùn)行，輪播圖片的變化速度越來越快，而且這時(shí)點(diǎn)擊ul標(biāo)簽已經(jīng)不起作用了。     

    問題原因：在后面停止輪播后再次輪播開始使用定時(shí)器的時(shí)候，沒有給賦值給pic_time來記錄，也就沒有再次鼠標(biāo)移到ul標(biāo)簽而清除定時(shí)器，因此導(dǎo)致再次點(diǎn)擊ul標(biāo)簽不能暫停自動(dòng)輪播播放，而且速度 越來越快。

    不足：沒有實(shí)現(xiàn)類似淘寶輪播圖那樣平滑過渡的無現(xiàn)滾動(dòng)的效果，左右箭頭的指示作用也沒有完成。這些在后期會(huì)繼續(xù)學(xué)習(xí)，繼續(xù)來完善，來分享.