Example of how jQuery implements sliding switching of left and right buttons by mouse click

When doing web front-end development, I often encounter picture sliding switching special effects. Next, through this article, I will share with you the use of jQuery to realize the sliding switching special effects of clicking the left and right buttons with the mouse. Interested friends can refer to the implementation code

jQuery implements click and left and right sliding switching effects:

HTML code is as follows:

<!--整体背景p-->
 <p class="warp">
  <!--中间内容p-->
 <p class="pContent">
   <p class="content">
    <ul class="contentUl">
     <li>
     <img src="/JS1/img/1.jpg" />
      <span>生命如歌，春天似梦 </span>
      <hr />
      <p>生命如歌，春天似梦，初春更是如诗如画。春似花季靓女，让人悸动，春似那雍容少妇，令人憧憬</p>
     </li>
     <li id="second">
      <img src="/JS1/img/2.jpg" />
      <span>如花的季节，赞扬 </span>
      <hr />
      <p>一切的生命力开始复苏，温暖如我，正是如花的季节，不是吗？</p>
     </li>
     <li>
      <img src="/JS1/img/3_1.jpg" />
      <span>梦想，不休不止</span>
      <hr />
      <p>畏惧忍受痛苦比忍受痛苦本身更加糟糕。没有一个心灵在追逐它的梦想时会忍受痛苦。</p>
     </li>
     <li>
      <img src="/JS1/img/4.jpg" />
      <span>时间在叶子的摆动里</span>
      <hr />
      <p>时间会消磨一切的，她会让我们忘记的。突然想：如果我们忘记了时间，是不是想忘掉的就都能忘掉。</p>
     </li>
     <li>
      <img src="/JS1/img/5.jpg" />
      <span>异乡的海韵,落日的余辉</span>
      <hr />
      <p>每个人或许都有一个愿望，希望在某年某月某天可以和相爱的人牵手漫步在夕阳西下，落日余晖的海滩中，细数彼此生活的点点滴滴。</p>
     </li>
     <li>
      <img src="/JS1/img/6.jpg" />
      <span>城市夜，一个静谧的夜</span>
      <hr />
      <p>城市夜，一个静谧的夜。城市里，寒风瑟瑟。酒吧灯红酒绿，这，才是夜市的开始。</p>
     </li>
    </ul>
   </p>
   <!--向左按钮-->
   <p class="leftBtn"><img src="/JS1/img/left.png" /></p>
   <!--向右按钮-->
   <p class="rightBtn"><img src="/JS1/img/right.png" /></p>
  </p>
 </p>

js code is as follows:

 $(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);
    }
   }
  });
 });

The above is the detailed content of Example of how jQuery implements sliding switching of left and right buttons by mouse click. For more information, please follow other related articles on the PHP Chinese website!