使用方法

在頁面中引入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中定義的！

});

總結

以上是生活随笔為你收集整理的html轮播台袋效果,jQuery轮播图插件带Ken Burns效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。