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 >
<
</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">
jquery在线图片
挡泥板
</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 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);
}
})
/
/相册右边按钮
$("#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++;
}
})
})
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。