推荐一款焦点图jQuery插件 SlidesJs

给大家推荐一款比较好用的 Jquery Slide 插件 slidesjs,本人一直在使用的哦。
这个插件支持两种slide效果,一个是滑动,还有一个是渐隐渐出,而且它还支持自适应屏幕 自动播放,播放暂停, callback等,功能还是比较齐全,大家可以在此基础上扩展很多效果。

slidesjs3

目前该插件已经更新至 3.0,支持jQuery 1.8.2 以上。 猛戳此处进入官网

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

基本的HTML

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


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

$(function(){

      $(“#slides”).slidesjs({

        width: 940,

        height: 528

      });

    });

二、设置在幻灯片中的第一张幻灯片。

$(function(){

      $(“#slides”).slidesjs({

        start: 3

      });

    });

三、前后按钮设置。

$(function(){

      $(“#slides”).slidesjs({

        navigation: {

          active: true,

            // [boolean] 生成下一个和以前的按钮。

            // 可以设置为false,并使用自己的按钮。

            // 用户定义的按钮,必须具备以下条件:

            // 上一个按钮:class=”slidesjs-previous slidesjs-navigation”

            // 下一个按钮:class=”slidesjs-next slidesjs-navigation”

          effect: “slide”

            //可以是 “slide” 或者 “fade”.

       }

      });

    });

四、分页设置。

$(function(){

      $(“#slides”).slidesjs({

        pagination: {

          active: true,

            // [boolean] 创建分页项

            // 不能使用自己的分页

          effect: “slide”

            // [string] 可以是 “slide” 或者 “fade”.

        }

      });

    });

五、播放和停止按钮设置。

$(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] 重新启动延迟无效幻灯片。

    }

  });

});

六、效果设置。

$(function(){

  $(“#slides”).slidesjs({

    effect: {

      slide: {

        // 滑动效果设置.

        speed: 200

          // [number] 速度以毫秒为单位的幻灯片动画。

      },

      fade: {

        speed: 300,

          // [number] 速度以毫秒为单位的幻灯片动画。

        crossfade: true

          // [boolean] 交叉过度效果.

      }

    }

  });

});

七、回调函数的使用。

$(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);

      }

    }

  });

});

Categories: jQuery, jQuery插件, 代码片段, 代码素材, 工作记录, 网址分享, 网络转载

发表评论

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

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>