jQuery 3D旋轉木馬效果輪播圖插件

發(fā)布時間：2017-05-14 12:39:43

發(fā)布者：jinchao

瀏覽量:

jCarrousel是一款炫酷且強大的3D旋轉木馬效果輪播圖jQuery插件。該旋轉木馬插件可以自適應屏幕大小來調整圖片的間距，可實現自動播放等。jCarrousel代碼簡潔，使用簡單，值得推薦。

由于IE瀏覽器不支持transform-style: preserve-3d;屬性，所以在IE瀏覽器中看到的3D效果會有些變形。

使用方法

使用該3D旋轉木馬插件需要引入jQuery、carrousel.js和carrousel.css文件。

HTML結構

初始化插件

在頁面DOM元素加載完畢之后，可以通過下面的方法來初始化該3D旋轉木馬效果輪播圖插件。

$('#dg-container').carrousel({
    current: 0,
    autoplay: true,
    interval: 3000
});

配置參數

該3D旋轉木馬插件有3個可用的配置參數：

current：當前旋轉木馬項的index值，默認為0。

autoplay：是否自動播放。默認值為false。

interval：旋轉木馬項之間切換的時間間隔，單位毫秒，默認值2000

方法API

$('#dg-container').carrousel('play');：播放。
$('#dg-container').carrousel('stop');：停止。
$('#dg-container').carrousel('next');：跳轉到下一個畫面。
$('#dg-container').carrousel('prev');：跳轉到前一個畫面。
$('#dg-container').carrousel(3);：跳轉到參數指定的畫面，參數從0開始計數，3代表第4張圖片。

jCarrousel插件的github地址是： https://github.com/DIYgod/jCarrousel

上一篇：自適應jQuery焦點圖特效

下一篇： html中有多個video如何實現鼠標劃過重新加載？

關鍵詞: