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;
//展示的图片，长度为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实现左右按钮点击的图片切换效果
• 基于jquery插件制作左右按钮与标题文字图片切换效果
• jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果