本文實例為大家分享了JS代碼實現頁面切換效果的具體代碼，供大家參考，具體內容如下
HTML+CSS部分
添加所有頁面，和上一頁、具體頁、下一頁的按鈕，
設置div樣式，默認第一頁顯示，其他頁隱藏。
|
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
|
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .item { display: none; width: 300px; height: 400px; overflow: hidden; position: relative; } .item>img { width: 100%; height: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .item.active { display: block; } </style> </head> <body> <div> <button class="prev" >上一頁</button> <button class="btn">1</button> <button class="btn">2</button> <button class="btn">3</button> <button class="btn">4</button> <button class="next" >下一頁</button> </div> <div> <div class="item active"><img src="img/1.png" height="1191" width="820" /></div> <div class="item"><img src="img/2.png" height="1191" width="820" /></div> <div class="item"><img src="img/3.png" height="1191" width="820" /></div> <div class="item"><img src="img/4.png" height="1191" width="820" /></div> </div> </body></html> |
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
|
<script type="text/javascript"> //封裝函數、圖片顯示的部分、傳入獲取到的div，和被點擊的序號 function toggle(eles, active) { for(var i = eles.length; i--;) { eles[i].className = "item"; //先讓所有div隱藏 } eles[active].className = "item active";//再讓被點擊的序號對應的div 顯示 } //獲取按鍵和div var aBtn = document.getElementsByClassName("btn"); var aIem = document.getElementsByClassName("item"); var prev = document.getElementsByClassName("prev"); var next = document.getElementsByClassName("next"); var nowPage = 0; //定義當前頁，默認值為0； for(var i = aBtn.length; i--;) { aBtn[i].tab = i; aBtn[i].onclick=function(){ toggle(aIem,this.tab); nowPage=this.tab; //被點擊后，保存當前頁的序號 } } //下一頁 next[0].onclick = function () { nowPage++; nowPage %= aBtn.length; toggle(aIem,nowPage); } //上一頁 prev[0].onclick=function(){ nowPage--; if(nowPage ==-1){ nowPage = aBtn.length-1; } toggle(aIem,nowPage); }</script> |
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/weixin_44189739/article/details/85342424
