推荐一款焦点图jQuery插件 SlidesJs

推荐一款焦点图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

< 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);        }      }    }); });