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

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

使用方法

使用該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：是否自動播放。默認(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張圖片。

總結(jié)

以上是生活随笔為你收集整理的css3旋转木马轮播图,超酷jQuery 3D旋转木马效果轮播图插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。