本文實例為大家分享了jQuery實現簡單輪播圖效果的具體代碼，供大家參考，具體內容如下
介紹：這里是我使用了計時器的方式實現圖片每隔幾秒切換然后添加了兩個按鈕用于上一張和下一張的切換
1、導入jQuery文件
|
1
|
<script src="jquery-3.5.1.js"></script> |
2、設置圖片的樣式
|
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
|
<style> *{ margin: 0; padding: 0; } #box{ width: 300px; height: 300px; border: 2px solid red; } #box img{ position: absolute; display: none; } #box :first-child{ display: block; } .page{ list-style: none; display: flex; width: 300px; justify-content: space-around; } .page li{ border: 1px solid red; border-radius: 50%; width: 20px; height: 20px; text-align: center; } .active{ background: red; } </style> <script src="./jquery.js"></script></head><body> <div id="box"> <img src="./img/1.jpg" alt=""> <img src="./img/2.jpg" alt=""> <img src="./img/3.jpg" alt=""> <img src="./img/4.jpg" alt=""> </div> <ul class="page" id="page" > <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> </ul><button id="next">下一張</button><button id="prev">上一張</button> |
3 進行圖片的輪播實現方式
|
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
|
/* 絕對定位 -- 摞起來 通過下標 -- 顯示當前 --其他兄弟 隱藏*/ <script> var index=0; // 移動方法 function move(){ index++; if (index>=$("#box img").length) { index=0; } $("#box img").eq(index).show().siblings().hide(); $("#page li").eq(index).addClass("active").siblings().removeClass("active"); } //計時器的實現方法 var t=setInterval(move,2000); //鼠標移動到圖片會停止離開繼續輪播 $("#box").hover(function(){ clearInterval(t) },function(){ t=setInterval(move,2000) }) $("#page li").click(function(){ index= $(this).index() ; $("#box img").eq(index).show().siblings().hide(); $("#page li").eq(index).addClass("active").siblings().removeClass("active"); }) //下一張的點擊 $("#next").click(function(){ move(); }) //上一張的點擊 $("#prev").click(function(){ index--; // 判斷如果下標超過固有圖片的數量時，從頭開始輪播 if (index<0) { index=$("#box img").length-1; } $("#box img").eq(index).show().siblings().hide(); $("#page li").eq(index).addClass("active").siblings().removeClass("active"); })</script> |
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/qianzihao007/article/details/111700867
