利用jquery怎么實現一個點擊按鈕左右切換圖片功能

利用jquery怎么實現一個點擊按鈕左右切換圖片功能？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

<div class="down-down-div">     
  <div class="pics-frame">
   
    <div class="frame-first">
  <!--第一個div -->
  <div id="left_btn" class="pic-button-left">
    <!--“ < ”按鈕-->
    <div >
      <
        </div>
   </div>
 </div>
 <!--第二個div -->
 <div class="frame-second">
 
  <div class="frame-second-up">
  <div >
   &nbsp;&nbsp;&nbsp;本車型適用的精品配件:
  </div>
  </div>
 
  <div class="frame-second-down">
 
  <div class="frame-second-down-down">
  <!--圖片集-->
  <div class="frame-second-down-uppics">
  <img id="img0"  src="./images/accessories/t500.png" />
  </div>
 
  <!--文字-->
  <div class="frame-second-down-downtext">
   擋泥板
  </div>
 
  </div>
 
  <div class="frame-second-down-down">
  <!--圖片集-->
  <div class="frame-second-down-uppics">
   <img id="img1"  src="./images/accessories/t501.png" />
  </div>
 
  <!--文字-->
  <div class="frame-second-down-downtext">
   車窗側雨刷
  </div>
 
  </div>
 
  <div class="frame-second-down-down">
  <!--圖片集-->
  <div class="frame-second-down-uppics">
   <img id="img2"  src="./images/accessories/t502.png" />
  </div>
 
  <!--文字-->
  <div class="frame-second-down-downtext">
   車牌窗飾框
  </div>
 
  </div>
 
  <div class="frame-second-down-down">
  <!--圖片集-->
  <div class="frame-second-down-uppics">
   <img id="img3"  src="./images/accessories/t600.png" />
  </div>
 
  <!--文字-->
  <div class="frame-second-down-downtext">
   地毯（七座）
  </div>
  </div>
 </div>
 
 </div>
 
 <!--第三個div -->
 <div id="right_btn" class="frame-third">
  <!--“ > ”按鈕-->
  <div class="pic-button-right">
  <div >
  >
  </div>
 </div>
 </div>
 
  </div>
</div>
 
 
<!--隱藏狀態的圖片集-->
<div id="imgs">
  <img src="images/accessories/t500.png"  />
 <img src="images/accessories/t501.png"  />
 <img src="images/accessories/t502.png"  />
 <img src="images/accessories/t600.png"  />
 <img src="images/accessories/t602.png"  />
  <img src="images/accessories/t603.png"  />
 <img src="images/accessories/t604.png"  />
 <img src="images/accessories/t605.png"  />
 <img src="images/accessories/t606.png"  />
 <img src="images/accessories/t607.png"  />
 <img src="images/accessories/t608.png"  />
</div>
 
 
$(function() {
 var images = [];
 var imgs = $("#imgs img");
 var index = 0; 
 //展示的圖片，長度為4
 var displayLength = $(".frame-second-down img").length;  
 for(var i = 0; i < imgs.length; i++) { 
    images.push(imgs[i]);
 }
 
  //相冊左邊按鈕
  $("#left_btn").click(function() {   
    if(index == 0) { 
    alert("已經是第一張照片啦！");
 return;
 
  } else {
 
  for(var j = 0; j < displayLength; j++) {
    $("#img" + j).attr("src", images[index - 1 + j].src);    
    }
   
    index--;
 }
 })
  
//相冊右邊按鈕
  
$("#right_btn").click(function() {    
  if(index == (imgs.length - displayLength)) {   
    alert("已經是最后一張圖片了！");
    return 0;
  } else {   
    for(var j = 0; j < displayLength; j++) {   
      $("#img" + j).attr("src", images[j + 1 + index].src);
   
    }
   
    index++;
  
  }
  
  })
})

看完上述內容，你們掌握利用jquery怎么實現一個點擊按鈕左右切換圖片功能的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！