兼容IE8的jQuery旋转木马幻灯片插件

兼容IE8的jQuery旋转木马幻灯片插件

插件介绍

Carousel.js是一款简单实用的jQuery旋转木马幻灯片插件。该旋转木马插件兼容IE8浏览器,可用于制作电影海报的3D旋转切换特效等。

使用方法

在页面中引入jquery和Carousel.js文件。

<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/Carousel.js"></script>

HTML结构

整个旋转木马的HTML结构如下:

<div class="poster-main" id="carousel" data-setting='{
        "width":1000,
        "height":300,
        "posterWidth":600,
        "posterHeight":300,
        "scale":0.8,
        "speed":1000,
        "autoPlay":true,
        "delay":3000,
        "verticalAlign":"middle"
        }'>
  <div class="poster-btn poster-prev-btn"></div>
  <ul class="poster-list">
    <li class="poster-item">
      <a href="#">
        <img src="http://static.zzyzan.com/qiniu/8675/image/0d7d3854989001245fd0188b106c6bd6.jpg?watermark/1/image/aHR0cDovL3d3dy56enl6YW4uY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE2LzA3Lzk2ZDZmMmU3ZTFmNzA1YWI1ZTU5Yzg0YTZkYzAwOWIyLnBuZw==/dissolve/100/gravity/SouthEast/dx/10/dy/10" alt="" width="100%" />
      </a>
    </li>
    <li class="poster-item">
      <a href="#">
        <img src="http://static.zzyzan.com/qiniu/8675/image/9512b245465153cd3db1aaeeadddeb7c.jpg?watermark/1/image/aHR0cDovL3d3dy56enl6YW4uY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE2LzA3Lzk2ZDZmMmU3ZTFmNzA1YWI1ZTU5Yzg0YTZkYzAwOWIyLnBuZw==/dissolve/100/gravity/SouthEast/dx/10/dy/10" alt="" width="100%" />
      </a>
    </li>
    <li class="poster-item">
      <a href="#">
        <img src="http://static.zzyzan.com/qiniu/8675/image/597b69368790b7f74b4edc36993a564c.jpg?watermark/1/image/aHR0cDovL3d3dy56enl6YW4uY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE2LzA3Lzk2ZDZmMmU3ZTFmNzA1YWI1ZTU5Yzg0YTZkYzAwOWIyLnBuZw==/dissolve/100/gravity/SouthEast/dx/10/dy/10" alt="" width="100%" />
      </a>
    </li>
    <li class="poster-item">
      <a href="#">
        <img src="http://static.zzyzan.com/qiniu/8675/image/0ad929c4b83d461d351cfe97d8cb7558.jpg?watermark/1/image/aHR0cDovL3d3dy56enl6YW4uY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE2LzA3Lzk2ZDZmMmU3ZTFmNzA1YWI1ZTU5Yzg0YTZkYzAwOWIyLnBuZw==/dissolve/100/gravity/SouthEast/dx/10/dy/10" alt="" width="100%" />
      </a>
    </li>
    <li class="poster-item">
      <a href="#">
        <img src="http://static.zzyzan.com/qiniu/8675/image/c7d1a75e8b49ced57ae30f62044aff48.jpg?watermark/1/image/aHR0cDovL3d3dy56enl6YW4uY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE2LzA3Lzk2ZDZmMmU3ZTFmNzA1YWI1ZTU5Yzg0YTZkYzAwOWIyLnBuZw==/dissolve/100/gravity/SouthEast/dx/10/dy/10" alt="" width="100%" />
      </a>
    </li>
  </ul>
  <div class="poster-btn poster-next-btn"></div>
</div>

初始化插件

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

$(function(){
    Carousel.init($("#carousel"));
    $("#carousel").init();
});

配置参数

该旋转木马可用的配置参数如下(这些参数通过data-setting属性以对象的方式传入):

  • width:幻灯片宽度。
  • height:幻灯片高度。
  • posterWidth:当前帧宽度。
  • posterHeight:当前帧高度。
  • scale:图片比例大小。
  • speed:播放速度。
  • autoPlay:是否自动播放。
  • delay:自动播放速度。
  • verticalAlign:垂直对齐方式。
下载 在线预览 积分 (-1) 吐槽 (7)
  • 版权声明:本文内容由互联网用户自发贡献,本站不拥有所有权,不承担相关法律责任。如果发现本站有涉嫌抄袭的内容, 欢迎发送邮件至 postmaster@zzyzan.com 举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。
  • 本作品是由 小乖乖资源共享网 会员 时间的灰烬 的投递作品。
  • 欢迎转载,但请务必注明来源地址:http://www.zzyzan.com/web/banner/8675.html

- 评论

  • 加载中,请稍候…
我要吐槽