html旋转木马切换效果,超酷jQuery 3D旋转木马效果轮播图插件 -HTML5功能

简要教程

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张图片。