推荐一款焦点图jQuery插件 SlidesJs

给大家推荐一款比较好用的 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);
      }
    }
  });
});
posted @ 2014-05-06 09:23  何小一  阅读(286)  评论(0)    收藏  举报