本文實例為大家分享了jQuery實現(xiàn)簡單輪播圖效果的具體代碼，供大家參考，具體內(nèi)容如下
介紹：這里是我使用了計時器的方式實現(xiàn)圖片每隔幾秒切換然后添加了兩個按鈕用于上一張和下一張的切換
1、導(dǎo)入jQuery文件
|
1
|
<script src="jquery-3.5.1.js"></script> |
2、設(shè)置圖片的樣式
|
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 進(jìn)行圖片的輪播實現(xiàn)方式
|
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
|
/* 絕對定位 -- 摞起來 通過下標(biāo) -- 顯示當(dāng)前 --其他兄弟 隱藏*/ <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"); } //計時器的實現(xiàn)方法 var t=setInterval(move,2000); //鼠標(biāo)移動到圖片會停止離開繼續(xù)輪播 $("#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--; // 判斷如果下標(biāo)超過固有圖片的數(shù)量時，從頭開始輪播 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> |
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持服務(wù)器之家。
原文鏈接：https://blog.csdn.net/qianzihao007/article/details/111700867
