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> |