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="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
:当前帧高度。 -
scale
:图片比例大小。 -
speed
:播放速度。 -
autoPlay
:是否自动播放。 -
delay
:自动播放速度。 -
verticalAlign
:垂直对齐方式。
Carousel.js旋转木马插件的github地址为:https://github.com/LikaiLee/Carousel
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!