给大家推荐一款比较好用的 Jquery Slide 插件 slidesjs，本人一直在使用的哦。
这个插件支持两种slide效果，一个是滑动，还有一个是渐隐渐出，而且它还支持自适应屏幕 自动播放，播放暂停， callback等，功能还是比较齐全，大家可以在此基础上扩展很多效果。
目前该插件已经更新至 3.0，支持jQuery 1.8.2 以上。 猛戳此处进入官网
下面介绍一下它的使用方法。
基本的HTML
|
1
2
3
4
5
6
7
8
9
|
<div id="slides"> <img src="test1.jpg" /> <img src="test1.jpg" /> <img src="test1.jpg" /> <img src="test1.jpg" /> <img src="test1.jpg" /></div><!-- callback 显示当前 --><div id="slidesjs-log">Slide <span class="slidesjs-slide-number">1</span> of 4</div> |
一、设置宽度和高度幻灯片。
|
1
2
3
4
5
6
|
$(function(){ $("#slides").slidesjs({ 940, height: 528 }); }); |
二、设置在幻灯片中的第一张幻灯片。
|
1
2
3
4
5
|
$(function(){ $("#slides").slidesjs({ start: 3 }); }); |
三、前后按钮设置。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
$(function(){ $("#slides").slidesjs({ navigation: { active: true, // [boolean] 生成下一个和以前的按钮。 // 可以设置为false，并使用自己的按钮。 // 用户定义的按钮，必须具备以下条件： // 上一个按钮：class="slidesjs-previous slidesjs-navigation" // 下一个按钮：class="slidesjs-next slidesjs-navigation" effect: "slide" //可以是 "slide" 或者 "fade". } }); }); |
四、分页设置。
|
1
2
3
4
5
6
7
8
9
10
11
|
$(function(){ $("#slides").slidesjs({ pagination: { active: true, // [boolean] 创建分页项 // 不能使用自己的分页 effect: "slide" // [string] 可以是 "slide" 或者 "fade". } }); }); |
五、播放和停止按钮设置。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
$(function(){ $("#slides").slidesjs({ play: { active: true, // [boolean] 生成的播放和停止按钮. //不能使用自己的按键。 effect: "slide", // [string] 可以是 "slide" 或者 "fade". interval: 5000, // [number] 每张幻灯片上花费的时间以毫秒为单位。 auto: false, // [boolean] 加载开始播放幻灯片。 swap: true, // [boolean] 显示/隐藏停止和播放按钮 pauseOnHover: false, // [boolean] 鼠标经过暂停正在播放的幻灯片。 restartDelay: 2500 // [number] 重新启动延迟无效幻灯片。 } });}); |
六、效果设置。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
$(function(){ $("#slides").slidesjs({ effect: { slide: { // 滑动效果设置. speed: 200 // [number] 速度以毫秒为单位的幻灯片动画。 }, fade: { speed: 300, // [number] 速度以毫秒为单位的幻灯片动画。 crossfade: true // [boolean] 交叉过度效果. } } });}); |
七、回调函数的使用。
|
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
|
$(function(){ $("#slides").slidesjs({ callback: { loaded: function(number) { //第一次加载幻灯片时 // Use your browser console to view log console.log('SlidesJS: Loaded with slide #' + number); // Show start slide in log $('#slidesjs-log .slidesjs-slide-number').text(number); }, start: function(number) { //幻灯片开始切换时 // Use your browser console to view log console.log('SlidesJS: Start Animation on slide #' + number); }, complete: function(number) { //幻灯片切换完成时 // Use your browser console to view log console.log('SlidesJS: Animation Complete. Current slide is #' + number); // Change slide number on animation complete $('#slidesjs-log .slidesjs-slide-number').text(number); } } });}); |