今天給大家分享的是利用jquery實現輪播圖的效果，廢話不多說咯，直接上代碼，當然每行代碼會有注釋了，這樣也便于理解哦。
第一步：先引進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> <!-- 圓點 --> <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; } /* 圓點樣式 */ #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> //設置圖片，圓點，箭頭共同的下標 從0開始 var index=0; //封裝輪播的函數 第一步 function show(){ //下標每次+1增加 index+=1; //如果下標大于等于圖片的長度數，返回第一張圖，即是下標index=0就行 if(index>=$("#banner_img>li").length){ index=0; } //讓li的每張圖片點擊時顯示自己，其他兄弟隱藏 $("#banner_img>li").eq(index).show(1000).siblings().hide(1000); //圓點的下標也需要封裝一下樣式 $("#banner_yuandian>li").eq(index).addClass("active").siblings().removeClass("active"); } //利用計時器達到輪播效果 第二步 var x=setInterval(show,2000); //鼠標移動到圖片上時清除計時器，移出之后重新加入計時器 $("#banner_img>li").hover( function(){ clearInterval(x); }, function(){ x=setInterval(show,2000); } ) //圓點設置，點擊圓點，切換相應圖片 第三步 $("#banner_yuandian>li").on("click",function(){ //點擊圓點時的下標取共同下標 var index=$(this).index();//出錯的地方index()語法 //點擊下標時展現對應的圖片，其他兄弟圖隱藏 $("#banner_img>li").eq(index).show(1000).siblings().hide(1000); //點擊圓點，添加樣式，其他刪除 $("#banner_yuandian>li").eq(index).addClass("active").siblings().removeClass("active"); }) //鼠標滑動上去滑動出來要清除計時器和再次設置計時器 第四步 $("#banner_yuandian>li").hover( function(){ clearInterval(x); }, function(){ x=setInterval(show,2000); } ) //箭頭設置 第五步 $("#banner_back").on("click",function(){ //點擊一次減去1 index--; //當下標小于0時，就返回第一張圖 if(index<0){ index=0; } //點擊下標時展現對應的圖片，其他兄弟圖隱藏 $("#banner_img>li").eq(index).show(1000).siblings().hide(1000); //點擊圓點，添加樣式，其他刪除 $("#banner_yuandian>li").eq(index).addClass("active").siblings().removeClass("active"); }) //下一張 可以直接調用 $("#banner_next").on("click",function(){ show(); }) //點擊button按鈕再次清除計時器和添加計時器 $("button").hover( function(){ clearInterval(x); }, function(){ x=setInterval(show,2000); }) |
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/weixin_53587096/article/details/111936865
