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;//展示的图片，长度为4var 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++;}})})

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

您可能感兴趣的文章: