本文实例为大家分享了jquery点击左右按钮切换图片的具体代码，供大家参考，具体内容如下
当点击了右边的按钮后，图片向左移动，同理左边按钮。
css样式此处省略......直接进入到js代码中
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
<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++;
}
})
})
|
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/i_am_yy/article/details/82110982