今天給大家分享的是利用jquery實(shí)現(xiàn)輪播圖的效果，廢話不多說(shuō)咯，直接上代碼，當(dāng)然每行代碼會(huì)有注釋了，這樣也便于理解哦。
第一步：先引進(jìn)jquery文件
|
1
|
<script src="./jquery.js"></script> |
第二步：html樣式
|
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
|
<div id="banner"> <!-- 圖片 --> <ul id="banner_img"> <li> <img src="./img/1.jpg" alt=""> </li> <li> <img src="./img/2.jpg" alt=""> </li> <li> <img src="./img/3.jpg" alt=""> </li> <li> <img src="./img/4.jpg" alt=""> </li> </ul> <!-- 圓點(diǎn) --> <ul id="banner_yuandian"> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <!-- < >箭頭指向 --> <button id="banner_back"><</button> <button id="banner_next">></button> </div> |
第三步：css樣式
|
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
|
<style> *{ margin: 0; padding: 0; list-style: none; } #banner{ position: relative; } /*圖片樣式 */ #banner #banner_img{ width: 300px; height: 300px; border: 2px red solid; } #banner #banner_img img{ width: 300px; height: 300px; } #banner #banner_img>li{ display: none; } #banner #banner_img :first-child{ display:block; } /* 圓點(diǎn)樣式 */ #banner_yuandian{ position: absolute; bottom: 10px; display: flex; margin-left: 35px; } #banner_yuandian li{ margin-left: 30px; width: 20px; height: 20px; border: 1px red solid; border-radius: 50%; text-align: center; } #banner_yuandian li:hover{ background: orange; } #banner_yuandian .active{ background: orange; } /* 箭頭樣式 */ #banner_back{ width: 30px; height: 30px; position: absolute; margin-top: -150px; } #banner_next{ width: 30px; height: 30px; position: absolute; margin-top: -150px; margin-left: 273px; }</style> |
第四步：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
|
<script> //設(shè)置圖片，圓點(diǎn)，箭頭共同的下標(biāo) 從0開(kāi)始 var index=0; //封裝輪播的函數(shù) 第一步 function show(){ //下標(biāo)每次+1增加 index+=1; //如果下標(biāo)大于等于圖片的長(zhǎng)度數(shù)，返回第一張圖，即是下標(biāo)index=0就行 if(index>=$("#banner_img>li").length){ index=0; } //讓li的每張圖片點(diǎn)擊時(shí)顯示自己，其他兄弟隱藏 $("#banner_img>li").eq(index).show(1000).siblings().hide(1000); //圓點(diǎn)的下標(biāo)也需要封裝一下樣式 $("#banner_yuandian>li").eq(index).addClass("active").siblings().removeClass("active"); } //利用計(jì)時(shí)器達(dá)到輪播效果 第二步 var x=setInterval(show,2000); //鼠標(biāo)移動(dòng)到圖片上時(shí)清除計(jì)時(shí)器，移出之后重新加入計(jì)時(shí)器 $("#banner_img>li").hover( function(){ clearInterval(x); }, function(){ x=setInterval(show,2000); } ) //圓點(diǎn)設(shè)置，點(diǎn)擊圓點(diǎn)，切換相應(yīng)圖片 第三步 $("#banner_yuandian>li").on("click",function(){ //點(diǎn)擊圓點(diǎn)時(shí)的下標(biāo)取共同下標(biāo) var index=$(this).index();//出錯(cuò)的地方index()語(yǔ)法 //點(diǎn)擊下標(biāo)時(shí)展現(xiàn)對(duì)應(yīng)的圖片，其他兄弟圖隱藏 $("#banner_img>li").eq(index).show(1000).siblings().hide(1000); //點(diǎn)擊圓點(diǎn)，添加樣式，其他刪除 $("#banner_yuandian>li").eq(index).addClass("active").siblings().removeClass("active"); }) //鼠標(biāo)滑動(dòng)上去滑動(dòng)出來(lái)要清除計(jì)時(shí)器和再次設(shè)置計(jì)時(shí)器 第四步 $("#banner_yuandian>li").hover( function(){ clearInterval(x); }, function(){ x=setInterval(show,2000); } ) //箭頭設(shè)置 第五步 $("#banner_back").on("click",function(){ //點(diǎn)擊一次減去1 index--; //當(dāng)下標(biāo)小于0時(shí)，就返回第一張圖 if(index<0){ index=0; } //點(diǎn)擊下標(biāo)時(shí)展現(xiàn)對(duì)應(yīng)的圖片，其他兄弟圖隱藏 $("#banner_img>li").eq(index).show(1000).siblings().hide(1000); //點(diǎn)擊圓點(diǎn)，添加樣式，其他刪除 $("#banner_yuandian>li").eq(index).addClass("active").siblings().removeClass("active"); }) //下一張 可以直接調(diào)用 $("#banner_next").on("click",function(){ show(); }) //點(diǎn)擊button按鈕再次清除計(jì)時(shí)器和添加計(jì)時(shí)器 $("button").hover( function(){ clearInterval(x); }, function(){ x=setInterval(show,2000); }) |
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持服務(wù)器之家。
原文鏈接：https://blog.csdn.net/weixin_53587096/article/details/111936865
