jQuery 3D旋轉(zhuǎn)木馬效果輪播圖插件

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

發(fā)布者：jinchao

瀏覽量:

jCarrousel是一款炫酷且強(qiáng)大的3D旋轉(zhuǎn)木馬效果輪播圖jQuery插件。該旋轉(zhuǎn)木馬插件可以自適應(yīng)屏幕大小來調(diào)整圖片的間距，可實(shí)現(xiàn)自動(dòng)播放等。jCarrousel代碼簡(jiǎn)潔，使用簡(jiǎn)單，值得推薦。

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

使用方法

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

HTML結(jié)構(gòu)

初始化插件

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

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

配置參數(shù)

該3D旋轉(zhuǎn)木馬插件有3個(gè)可用的配置參數(shù)：

current：當(dāng)前旋轉(zhuǎn)木馬項(xiàng)的index值，默認(rèn)為0。

autoplay：是否自動(dòng)播放。默認(rèn)值為false。

interval：旋轉(zhuǎn)木馬項(xiàng)之間切換的時(shí)間間隔，單位毫秒，默認(rèn)值2000

方法API

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

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

上一篇：自適應(yīng)jQuery焦點(diǎn)圖特效

下一篇： html中有多個(gè)video如何實(shí)現(xiàn)鼠標(biāo)劃過重新加載？

關(guān)鍵詞: