简易图片渐隐渐显轮播思路

本人最近在制做的项目中美工美眉给了我一个轮播的效果图，诚然网上有不少相似的代码插件，可是不是样式太难修改，就是逻辑有些复杂，因而我在结合别人博客的基础上，本身整了一套较为简易的开发教程，主要是与众位分享一下个人思路。

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