本文实例为大家分享了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++; } })})

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