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

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

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若干这是轮播图片或文字的主要放置地。

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

也很简单自己看，我不解释了。

3. 接下来是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