jCarrousel是一款炫酷且强大的3D旋转木马效果轮播图jQuery插件。该旋转木马插件可以自适应屏幕大小来调整图片的间距,可实现自动播放等。jCarrousel代码简洁,使用简单,值得推荐。
由于IE浏览器不支持transform-style: preserve-3d;
属性,所以在IE浏览器中看到的3D效果会有些变形。
使用方法
使用该3D旋转木马插件需要引入jQuery、carrousel.js和carrousel.css文件。
<link rel="stylesheet" href="css/carrousel.css"/> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="dist/carrousel.js"></script>
HTML结构
<div class="banner"> <section id="dg-container" class="dg-container"> <div class="dg-wrapper"> <a href="#" link="http://www.htmleaf.com/"> <img src="images/1.jpg"> </a> <a href="#" link="http://www.htmleaf.com/"> <img src="images/2.jpg"> </a> <!-- ... --> </div> <ol class="button" id="lightButton"> <li index="0"> <li index="1"> <!-- ... --> </ol> <nav> <span class="dg-prev"></span> <span class="dg-next"></span> </nav> </section> </div>
初始化插件
在页面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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!