幻灯片/轮播

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

面包多

超酷jQuery 3D旋转木马效果轮播图插件-创客云
jCarrousel 是一款炫酷且强大的 3D 旋转木马效果轮播图 jQuery 插件。该旋转木马插件可以自适应屏幕大小来调整图片的间距,可实现自动播放等。jCarrousel 代码简洁,使用简单,值得推荐。由于 IE 浏览器不支持 transform-style: preserve-3d;属性,所以在 IE 浏览器中看到的 3D 效果会有些变形。

使用方法:

使用该 3D 旋转木马插件需要引入 jQuery、carrousel.js 和 carrousel.css 文件。

也想出现在这里?联系我们
创客主机
  1. <link rel="stylesheet" href="css/carrousel.css"/>              
  2. <script type="text/javascript" src="js/jquery.min.js"></script>
  3. <script type="text/javascript" src="dist/carrousel.js"></script>

HTML 结构:

  1. <div class="banner">
  2.     <section id="dg-container" class="dg-container">
  3.         <div class="dg-wrapper">
  4.             <a href="#" link="http://www.htmleaf.com/">
  5.                 <img src="images/1.jpg">
  6.             </a>
  7.             <a href="#" link="http://www.htmleaf.com/">
  8.                 <img src="images/2.jpg">
  9.             </a>
  10.             <!-- ... -->
  11.         </div>
  12.         <ol class="button" id="lightButton">
  13.             <li index="0">
  14.             <li index="1">
  15.             <!-- ... -->
  16.         </ol>
  17.         <nav>
  18.             <span class="dg-prev"></span>
  19.             <span class="dg-next"></span>
  20.         </nav>
  21.     </section>
  22. </div>

初始化插件:

在页面 DOM 元素加载完毕之后,可以通过下面的方法来初始化该 3D 旋转木马效果轮播图插件。

  1. $('#dg-container').carrousel({
  2.     current: 0,
  3.     autoplay: true,
  4.     interval: 3000
  5. });

配置参数:

该 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

(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!