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

最新推荐文章于 2024-07-13 15:30:00 发布

IT_wogua

最新推荐文章于 2024-07-13 15:30:00 发布

阅读量608

点赞数

本文链接：https://blog.csdn.net/IT_wogua/article/details/79786348

版权

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结构

<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="images/1.jpg" alt="" width="100%" /></a></li> 
          <li class="poster-item"><a href="#"><img src="images/2.jpg" alt="" width="100%" /></a></li> 
          <li class="poster-item"><a href="#"><img src="images/3.jpg" alt="" width="100%" /></a></li> 
          <li class="poster-item"><a href="#"><img src="images/4.jpg" alt="" width="100%" /></a></li> 
          <li class="poster-item"><a href="#"><img src="images/5.jpg" 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：当前帧高度。
speed：播放速度。
autoPlay：是否自动播放。
delay：自动播放速度。
verticalAlign：垂直对齐方式。

Carousel.js旋转木马插件的github地址为：https://github.com/LikaiLee/Carousel

插件库来自 http://www.htmleaf.com/jQuery/Slideshow-Scroller/201609214022.html

以下是我在使用中遇到的小问题：

当把jquery版本号从 1.9.1改成 3.3.1时，效果会出不来，浏览器会报错，提示如下：

Uncaught TypeError: this.posterItems.size is not a function
    at new Carousel (Carousel.js:19)
    at HTMLDivElement.<anonymous> (Carousel.js:281)
    at Function.each (jquery.min.js:2)
    at w.fn.init.each (jquery.min.js:2)
    at Function.Carousel.init (Carousel.js:280)
    at index.js:21
    at HTMLDocument.<anonymous> (index.js:23)
    at l (jquery.min.js:2)
    at c (jquery.min.js:2)