标签:pat ati plain asp hot col src cells desc
jSlider是一个非常好的图片轮播插件。
有导航箭头,可以自动播放,可以循环播放。
官方网站 https://github.com/copthuy/jSlider
使用方法:
第一步,引入jquery.js
1
|
|
第二步,引入css和js
1
|
< link rel = "stylesheet" href = "jSlider.min.css" > |
1
|
< script src = "jquery.jSlider.min.js" ></ script > |
第三步,编写DOM代码
1
2
3
4
5
6
7
8
|
< div class = "jSlider" id = "slider-example" > < div >< img src = "images/photo1.jpg" ></ div > < div >< img src = "images/photo2.jpg" ></ div > < div >< img src = "images/photo3.jpg" ></ div > < div >< img src = "images/photo4.jpg" ></ div > < div >< img src = "images/photo5.jpg" ></ div > < div >< img src = "images/photo6.jpg" ></ div > </ div > |
第四步,初始化轮播jSlider
1
2
3
4
5
6
7
8
9
|
$(‘#slider-example‘).sliderInit({ ‘navigation‘: ‘hover‘, ‘indicator‘: ‘always‘, ‘speed‘: 500, ‘delay‘: 5000, ‘transition‘: ‘slide‘, ‘loop‘: true, ‘group‘: 1 }); |
完整代码
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
|
<!DOCTYPE html> < html lang = "zh" > < head > < meta charset = "utf-8" > < title >jSlider</ title > < meta name = "description" content = "jSlider JS example" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < link rel = "stylesheet" href = "jSlider.min.css" > </ head > < body > < div class = "jSlider" id = "slider-example" > < div >< img src = "images/photo1.jpg" ></ div > < div >< img src = "images/photo2.jpg" ></ div > < div >< img src = "images/photo3.jpg" ></ div > < div >< img src = "images/photo4.jpg" ></ div > < div >< img src = "images/photo5.jpg" ></ div > < div >< img src = "images/photo6.jpg" ></ div > </ div > </ script > < script src = "jquery.jSlider.min.js" ></ script > < script > $(‘#slider-example‘).sliderInit({ ‘navigation‘: ‘hover‘, ‘indicator‘: ‘always‘, ‘speed‘: 500, ‘delay‘: 5000, ‘transition‘: ‘slide‘, ‘loop‘: true, ‘group‘: 1 }); </ script > </ body > </ html > |
标签:pat ati plain asp hot col src cells desc
原文地址:https://www.cnblogs.com/max-hou/p/10955644.html