Beispiel dafür, wie jQuery das gleitende Umschalten der linken und rechten Schaltflächen durch Klicken mit der Maus implementiert

Bei der Web-Front-End-Entwicklung stoße ich häufig auf Bildgleitwechseleffekte. Als Nächstes werde ich Ihnen in diesem Artikel zeigen, wie Sie mit jQuery die Gleitschalteffekte beim Klicken mit der linken und rechten Maustaste realisieren Interessierte Freunde können sich auf den Implementierungscode

beziehen, um jQuery-Implementierungen zu verwenden, indem Sie nach links und rechts gleitende Umschalteffekte erzielen:

Der HTML-Code lautet wie folgt:

<!--整体背景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 lautet wie folgt:

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

Das obige ist der detaillierte Inhalt vonBeispiel dafür, wie jQuery das gleitende Umschalten der linken und rechten Schaltflächen durch Klicken mit der Maus implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!