html轮播台袋效果,jQuery轮播图插件带Ken Burns效果

使用方法

在页面中引入subtle-slideshow.css、jquery和jquery.subtle-slideshow.js文件。

HTML结构

每个span标签里的class用于指定Ken Burns效果。他们可以是：

left：从左向右。

right：从右向左。

up：从下向上。

down：从上向下。

in：从小到大。。

out：从大到小。

Revolve Waterbottle

Lunchbox

Salad Shaker

初始化插件

$('#slides').slideshow({

randomize: true,            // 随机化幻灯片的播放顺序。

slideDuration: 6000,        // 每个感应幻灯片的持续时间。

fadeDuration: 1000,         // 衰落过渡的持续时间。 应该比slideDuration短。

animate: true,              // 打开或关闭css动画。

pauseOnTabBlur: true,       // 当标签失焦时暂停幻灯片放映。 这可以防止使用setTimeout()出现毛刺。

enableLog: false,           // 启用日志消息到控制台。 对调试很有用。

slideElementClass: 'slide', // 这也是在CSS中定义的！

slideshowId: 'slideshow'    // 这也是在CSS中定义的！

});