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

合集下载
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

jCarrousel 插件的 github 地址是: https://github.com/DIYgod/jCarrousel
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/">
配置参数
该 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 张图片。
济南做网站公司:www.cnwenhui.cn
Βιβλιοθήκη Baidu
jCarrousel 是一款炫酷且强大的 3D 旋转木马效果轮播图 jQuery 插件。该 旋转木马插件可以自适应屏幕大小来调整图片的间距,可实现自动播放等。 jCarrousel 代码简洁,使用简单,值得推荐。
由于 IE 浏览器不支持 transform-style: preserve-3d;属性,所以在 IE 浏览 器中看到的 3D 效果会有些变形。
初始化插件
在页面 DOM 元素加载完毕之后,可以通过下面的方法来初始化该 3D 旋转 木马效果轮播图插件。 $('#dg-container').carrousel({ current: 0, autoplay: true,
济南做网站公司:www.cnwenhui.cn
interval: 3000 });
使用方法
使用该 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>
济南做网站公司:www.cnwenhui.cn
<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>
相关文档
最新文档