利用jquery怎么实现一个点击按钮左右切换图片功能？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
计算
安全
数据库
网络和加速
企业服务
<div class="down-down-div">
<div class="pics-frame">
<div class="frame-first">
<!--第一个div -->
<div id="left_btn" class="pic-button-left">
<!--“ < ”按钮-->
<div >
<
</div>
</div>
</div>
<!--第二个div -->
<div class="frame-second">
<div class="frame-second-up">
<div >
本车型适用的精品配件:
</div>
</div>
<div class="frame-second-down">
<div class="frame-second-down-down">
<!--图片集-->
<div class="frame-second-down-uppics">
<img id="img0" 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" 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" 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" 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 >
>
</div>
</div>
</div>
</div>
</div>
<!--隐藏状态的图片集-->
<div id="imgs">
<img src="images/accessories/t500.png" />
<img src="images/accessories/t501.png" />
<img src="images/accessories/t502.png" />
<img src="images/accessories/t600.png" />
<img src="images/accessories/t602.png" />
<img src="images/accessories/t603.png" />
<img src="images/accessories/t604.png" />
<img src="images/accessories/t605.png" />
<img src="images/accessories/t606.png" />
<img src="images/accessories/t607.png" />
<img src="images/accessories/t608.png" />
</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怎么实现一个点击按钮左右切换图片功能的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
