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

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

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

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

     
  

   
    

  
  

    
    

      <
        
   
 
 
 

 
  

  

      本车型适用的精品配件:
  
  
 
  

 
  

  
  

  
  
 
  
  

   挡泥板
  
 
  
 
  

  
  

   
  
 
  
  

   车窗侧雨刷
  
 
  
 
  

  
  

   
  
 
  
  

   车牌窗饰框
  
 
  
 
  

  
  

   
  
 
  
  

   地毯（七座）
  
  
 
 
 
 
 
 

  
  

  

  >
  
 
 
 
  

 
 


  
 
 
 
 
  
 
 
 
 
 

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

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