jQueryでマウスクリックによる左右ボタンのスライド切り替えを実装する例

Web フロントエンド開発をしていると、画像のスライド切り替え効果によく遭遇します。次に、この記事を通じて、マウスで左右のボタンをクリックするスライド切り替え効果を実現する方法を紹介します。実装コードを参照できます

jQueryを使用して左右のスライド切り替えを実現します。特殊効果:

HTMLコードは次のとおりです:

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

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

以上がjQueryでマウスクリックによる左右ボタンのスライド切り替えを実装する例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。