本文實例為大家分享了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
