1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > css3旋转木马轮播图 超酷jQuery 3D旋转木马效果轮播图插件

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

时间:2022-07-25 01:06:54

相关推荐

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

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。