Posted in jQuery onJanuary 27, 2021
本文实例为大家分享了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;"> 本车型适用的精品配件: </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实现点击左右按钮切换图片
- Author -
i_am_yy声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@