jQuery 3D旋转木马效果轮播图插件

发布时间：2017-05-14 12:39:43

发布者：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如何实现鼠标划过重新加载？

关键词:

旋转木马

返回列表