幻灯片/轮播
兼容IE8旋转木马幻灯片jQuery插件
PetitQ
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：垂直对齐方式
Github 地址：https://github.com/LikaiLee/Carousel
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
