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)
查看了插件源代码等,目前还没想明白是怎么一回事
- 插入的图片一定要设置 width:100%,否则会出现除了在当前帧时的高度正确,其他情况下的高度都会超出