Maison >interface Web >js tutoriel >Exemple de la façon dont jQuery implémente la commutation coulissante des boutons gauche et droit par clic de souris

Exemple de la façon dont jQuery implémente la commutation coulissante des boutons gauche et droit par clic de souris

黄舟
黄舟original
2018-05-11 11:04:353646parcourir

Lors du développement web front-end, je rencontre souvent des effets de commutation par glissement d'image. Ensuite, à travers cet article, je vais partager avec vous comment utiliser jQuery pour réaliser les effets de commutation par glissement en cliquant sur les boutons gauche et droit avec la souris. . Les amis intéressés peuvent se référer au code d'implémentation

pour utiliser les implémentations jQuery des effets de commutation coulissante gauche et droite :

Le code HTML est le suivant :

<!--整体背景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>

Le code js est le suivant :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn