给大家推荐一款比较好用的 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({
width: 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);
}
}
});
});
|