明凯博客

关注网站技术,一个特立独行的程序员

推荐一款焦点图jQuery插件 SlidesJs

给大家推荐一款比较好用的 Jquery Slide 插件 slidesjs,本人一直在使用的哦。

这个插件支持两种slide效果,一个是滑动,还有一个是渐隐渐出,而且它还支持自适应屏幕 自动播放,播放暂停, callback等,功能还是比较齐全,大家可以在此基础上扩展很多效果。

目前该插件已经更新至 3.0,支持jQuery 1.8.2 以上。 http://slidesjs.com/

下面介绍一下它的使用方法。

基本的HTML。

1
2
3
4
5
6
7
8
9
10
11
<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">
	<span class="slidesjs-slide-number">1</span>
</div>

一、设置宽度和高度幻灯片。

1
2
3
4
5
6
7
 
$(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
15
$(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
12
13
$(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
22
$(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
18
19
20
$(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
$(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);
      }
    }
  });
});

, ,

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注