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

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

• 使用jQuery实现鼠标点击左右按钮滑动切换
• 基于jquery实现左右按钮点击的图片切换效果
• jquery带有索引按钮且自动轮播切换特效代码分享
• jQuery幻灯片特效代码分享 鼠标滑过按钮时切换（2）
• Jquery幻灯片特效代码分享 鼠标点击按钮时切换（1）
• 基于jquery插件制作左右按钮与标题文字图片切换效果
• jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
• jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
• jQuery实现简单的按钮颜色变化

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！