jQuery implements clicking left and right buttons to switch pictures

This article example shares the specific code of jQuery to switch pictures by clicking the left and right buttons for your reference. The specific content is as follows

When the button on the right is clicked, the image moves to the left, and similarly for the button on the left.

The css style is omitted here...go directly to the js code

<div class="down-down-div">     
  <div class="pics-frame">
   
    <div class="frame-first">
  <!--First div -->
  <div id="left_btn" class="pic-button-left">
    <!--“ < ” button-->
    <div style="padding-top: 70px;">
      <
        </div>
   </div>
 </div>
 <!--Second div -->
 <div class="frame-second">
 
  <div class="frame-second-up">
  <div style="float: left;font-size: 10px;">
   &nbsp;&nbsp;&nbsp;The fine accessories suitable for this model:
  </div>
  </div>
 
  <div class="frame-second-down">
 
  <div class="frame-second-down-down">
  <!--Picture Gallery-->
  <div class="frame-second-down-uppics">
  <img id="img0" style="width: 100%;height: 100%;" src="./images/accessories/t500.png" />
  </div>
 
  <!--Text-->
  <div class="frame-second-down-downtext">
   Mudguard
 
  </div>
 
  <div class="frame-second-down-down">
  <!--Picture Gallery-->
  <div class="frame-second-down-uppics">
   <img id="img1" style="width: 100%;height: 100%;" src="./images/accessories/t501.png" />
  </div>
 
  <!--Text-->
  <div class="frame-second-down-downtext">
   Window side wipers</div>
 
  </div>
 
  <div class="frame-second-down-down">
  <!--Picture Gallery-->
  <div class="frame-second-down-uppics">
   <img id="img2" style="width: 100%;height: 100%;" src="./images/accessories/t502.png" />
  </div>
 
  <!--Text-->
  <div class="frame-second-down-downtext">
   License Plate Window Trim Frame</div>
 
  </div>
 
  <div class="frame-second-down-down">
  <!--Picture Gallery-->
  <div class="frame-second-down-uppics">
   <img id="img3" style="width: 100%;height: 100%;" src="./images/accessories/t600.png" />
  </div>
 
  <!--Text-->
  <div class="frame-second-down-downtext">
   Carpet (seven seats)
  </div>
  </div>
 </div>
 
 </div>
 
 <!--The third div -->
 <div id="right_btn" class="frame-third">
  <!--“ > ” button -->
  <div class="pic-button-right">
  <div style="padding-top: 70px;">
  >
  </div>
 </div>
 </div>
 
  </div>
</div>
 
 
<!--Hidden picture collection-->
<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; 
 //The displayed image has a length of 4
 var displayLength = $(".frame-second-down img").length;  
 for(var i = 0; i < imgs.length; i++) { 
    images.push(imgs[i]);
 }
 
  //Album left button $("#left_btn").click(function() {   
    if(index == 0) { 
    alert("It's already the first photo!");
 return;
 
  } else {
 
  for(var j = 0; j < displayLength; j++) {
    $("#img" + j).attr("src", images[index - 1 + j].src);    
    }
   
    index--;
 }
 })
  
//Button on the right side of the album $("#right_btn").click(function() {    
  if(index == (imgs.length - displayLength)) {   
    alert("This is the last picture!");
    return 0;
  } else {   
    for(var j = 0; j < displayLength; j++) {   
      $("#img" + j).attr("src", images[j + 1 + index].src);
   
    }
   
    index++;
  
  }
  
  })
})

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Use jQuery to implement sliding switching by clicking the left and right buttons
Realize the image switching effect by clicking the left and right buttons based on jQuery
jQuery with index button and automatic carousel switching special effects code sharing
jQuery slideshow special effects code sharing switch when the mouse moves over the button (2)
Jquery slideshow special effects code sharing switch when the mouse clicks the button (1)
Based on jQuery plug-in, create left and right buttons and title text image switching effect
jQuery implements hiding and displaying animation effects/dynamic decrement of input box characters/navigation button switching
Jquery imitates QQ Mall with left and right buttons to control the focus picture switching scrolling effect
jQuery implements simple button color change

<<: Linux uses NetworkManager to randomly generate your MAC address

>>: Solution to the problem that the MySQL configuration file cannot be modified (Win10)