特效介绍

carousel.js是一款基于jQuery库的旋转木马图片轮播插件,始终一张图片在最前面,其他图片分布在两侧,以一定比例缩小,像3D效果的旋转木马一样轮播图片。用在网站的banner上会比较炫酷。
carousel.js理论上支持无数张图片,只要放到carousel容器中即可,但最少两张,不然无法切换。
使用方法
1、在css中加入下面的代码,对carousel进行一个基本的布局:
#carousel { position: relative; z-index: 2; height: 200px; margin-top: 200px; transform-style: preserve-3d; perspective: 800px; } #carousel img { position: absolute; left: 50%; top: 50%; width: 300px; height: 200px; margin-left: -150px; margin-top: -100px; border-radius: 8px; transition: transform 0.5s ease-in-out; }2、在需要使用本插件的地方加入下面的代码:
<div id="carousel"> <img src="images/1.png"> <img src="images/2.png"> <img src="images/3.png"> <img src="images/4.png"> <img src="images/5.png"> </div>3、引用相关js,并进行插件初始化:
<script src="http://www.5imoban.net/download/jquery/jQuery-1.10.2.min.js"></script> <script src="jquery.carousel.js"></script> <script> $(function () { $('#carousel').carousel({curDisplay: 0, autoPlay: true, interval: 3000}); }); </script>4、本旋转木马插件,仅支持三个参数:
curDisplay : 当前显示页
autoPlay : 自动轮播
interval : 自动轮播间隔时间