jQuery如何实现鼠标点击左右按钮滑动切换的示例

在做web前端开发的时候经常遇到图片滑动切换特效，接下来通过本文给大家分享使用jquery实现鼠标点击左右按钮滑动切换特效，感兴趣的朋友参考实现代码

使用jQuery实现点击左右滑动切换特效：

HTML代码如下：

 

  
 

   

    

     

     @@##@@
      生命如歌，春天似梦 
      

      
生命如歌，春天似梦，初春更是如诗如画。春似花季靓女，让人悸动，春似那雍容少妇，令人憧憬
     
     

      @@##@@
      如花的季节，赞扬 
      

      
一切的生命力开始复苏，温暖如我，正是如花的季节，不是吗？
     
     

      @@##@@
      梦想，不休不止
      

      
畏惧忍受痛苦比忍受痛苦本身更加糟糕。没有一个心灵在追逐它的梦想时会忍受痛苦。

							

								
								

									Mapify
									
Mapify是由Xmind推出的AI思维导图生成工具，原名ChatMind
								
								下载 
							
						
     
     

      @@##@@
      时间在叶子的摆动里
      

      
时间会消磨一切的，她会让我们忘记的。突然想：如果我们忘记了时间，是不是想忘掉的就都能忘掉。
     
     

      @@##@@
      异乡的海韵,落日的余辉
      

      
每个人或许都有一个愿望，希望在某年某月某天可以和相爱的人牵手漫步在夕阳西下，落日余晖的海滩中，细数彼此生活的点点滴滴。
     
     

      @@##@@
      城市夜，一个静谧的夜
      

      
城市夜，一个静谧的夜。城市里，寒风瑟瑟。酒吧灯红酒绿，这，才是夜市的开始。
     
    
   

   
   
@@##@@
   
   
@@##@@
  

 

js代码如下：

 $(document).ready(function(){ 
  //向左按钮点击事件
  var index = 0;
  var liLen;
  $(".leftBtn").click(function(){
   index++;
   liLen = $(".content ul.contentUl li").length; //目前长度返回值为6
   if(index >= 4)
   {
    $(".content ul.contentUl").stop();
    alert("已经到达最后一页！");
    index = 3;
   }else{
    if(index == 1)
    {
     $(".content ul.contentUl").animate({left:-index*330},700);
    }else{
     $(".content ul.contentUl").animate({left:-index*305},700);
    }
   }
  });
  //向右按钮点击事件
  $(".rightBtn").click(function(){
   if(index == 0)
   {
    $(".content ul.contentUl").stop();
    alert("这是第一页，不能再往前翻了！");
   }else{
    index--;
    if(index == 0)
    {
     $(".content ul.contentUl").animate({left:-40},700);
    }else{
     $(".content ul.contentUl").animate({left:-index*310},700);
    }
   }
  });
 });