首页 > 特效插件 > 滚动轮播 >  jQuery旋转木马图片轮播插件carousel.js正文

jQuery旋转木马图片轮播插件carousel.js

特效介绍


    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    : 自动轮播间隔时间