jquery实现点击左右按钮切换图片

本文实例为大家分享了jquery点击左右按钮切换图片的具体代码，供大家参考，具体内容如下

当点击了右边的按钮后，图片向左移动，同理左边按钮。

css样式此处省略......直接进入到js代码中

<div class="down-down-div">
  <div class="pics-frame">

    <div class="frame-first">
  <!--第一个div -->
  <div id="left_btn" class="pic-button-left">
    <!--“ < ”按钮-->
    <div style="padding-top: 70px;">
      <
        </div>
   </div>
 </div>
 <!--第二个div -->
 <div class="frame-second">

  <div class="frame-second-up">
  <div style="float: left;font-size: 10px;">
   &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" style="width: 100%;height: 100%;" 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" style="width: 100%;height: 100%;" 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" style="width: 100%;height: 100%;" 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" style="width: 100%;height: 100%;" 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 style="padding-top: 70px;">
  >
  </div>
 </div>
 </div>

  </div>
</div>

<!--隐藏状态的图片集-->
<div id="imgs">
  <img src="images/accessories/t500.png" style="display: none;" />
 <img src="images/accessories/t501.png" style="display: none;" />
 <img src="images/accessories/t502.png" style="display: none;" />
 <img src="images/accessories/t600.png" style="display: none;" />
 <img src="images/accessories/t602.png" style="display: none;" />
  <img src="images/accessories/t603.png" style="display: none;" />
 <img src="images/accessories/t604.png" style="display: none;" />
 <img src="images/accessories/t605.png" style="display: none;" />
 <img src="images/accessories/t606.png" style="display: none;" />
 <img src="images/accessories/t607.png" style="display: none;" />
 <img src="images/accessories/t608.png" style="display: none;" />
</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++;

  }

  })
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。