簡易圖片漸隱漸顯輪播思路

本人最近在製做的項目中美工美眉給了我一個輪播的效果圖，誠然網上有不少相似的代碼插件，可是不是樣式太難修改，就是邏輯有些複雜，因而我在結合別人博客的基礎上，本身整了一套較爲簡易的開發教程，主要是與衆位分享一下個人思路。

1. html部分

<div class="zong">
     <div class="zong_zi">
         <div class="pic"><img src="images/1.jpg">1</div>
         <div class="pic"><img src="images/2.jpg">2</div>
         <div class="pic"><img src="images/3.jpg">3</div>
         <div class="pic"><img src="images/4.jpg">4</div>
         <div class="pic"><img src="images/5.jpg">5</div>
     </div>
     <a href="###" id="prev">上一頁</a> <a href="###" id="next">下一頁</a>
 </div>

html部分的內容結構簡單明瞭，只用一個大的div包住內部用一個小的div裏邊依次放入class爲.pic的div若干這是輪播圖片或文字的主要放置地。

1. css部分

.zong{ width:500px; height:430px; margin:20px auto;}
.zong_zi{ width:500px; height:340px; margin:0; overflow:hidden;}
.pic{ width:500px; height:340px;}
.pic img{ width:500px; height:300px;}

也很簡單本身看，我不解釋了。

1. 接下來是javascript部分
   

$(function(){
  //獲取部份內容
   var $piclen=$('.pic').length;
   var index=0;
   var ti=null;
   //執行函數
   move();

   //鼠標移入暫停效果移除繼續
   $('.zong_zi').hover(function(){
      clearInterval(ti); 
   },function(){
      move();    
   })
 
   //上一頁     
   $('#prev').click(function(){
      clearInterval(ti); 
      if(index==0){index=$piclen;}           
      index--;
      $('.pic').eq(index-1).fadeIn(500).siblings('.pic').fadeOut(500);
      move();    
   })
   
   //下一頁         
   $('#next').click(function(){
      clearInterval(ti);                             
      $('.pic').eq(index).fadeIn(500).siblings('.pic').fadeOut(500); 
      index++;       
      if(index==$piclen){index=0;}
      move();
   })

   //輪播效果        
   function move(){
      ti=setInterval(function(){
     $('.pic').eq(index).fadeIn(500).siblings('.pic').fadeOut(500);  
     index++;
         if(index==$piclen){index=0;}
      },4000);       
   }
}

move()函數利用定時器實現輪播效果，在實現依次漸隱漸現後給index索引值加1判斷直到數字與.pic的數量相同清零循環，點擊下一頁思路與輪播思路相同，只是此時一開始須要清楚ti，後面的上一頁也是這個思路，可是再在點擊 上一頁時須要注意的是此時與下一頁的邏輯正好相反，所以要先判斷，再自減，同事由於要顯示的是當前index索引前一項的內容，因此index處的索引要減去1，即index-1