幻灯片/轮播

jQuery自动轮播旋转木马插件

创客主机


jquery.caroursel.js是一款非常实用的可自动轮播的jQuery旋转木马插件。该旋转木马将图片进行堆叠,轮流的将图片推送到最前面来展示,形成旋转木马的效果。

使用方法:

该jQuery旋转木马插件需要引入jQuery,jquery.carousel.js文件。

  1. <script src="js/jquery.min.js"></script>
  2. <script src="js/jquery.carousel.js"></script>

HTML结构:

该jQuery旋转木马插件使用一个[div]来作为包裹元素,在它里面是一个无序列表,用于放置图片,以及两个作为前后导航按钮的[div]元素。

  1. <div class="caroursel rotator-demo">
  2.   <ul class="rotator-list">
  3.     <li class="rotator-item"><img src="image/1.jpg"></li>
  4.     <li class="rotator-item"><img src="image/2.jpg"></li>
  5.     <li class="rotator-item"><img src="image/3.jpg"></li>
  6.   </ul>
  7.   <div class="rotator-btn rotator-prev-btn"></div>
  8.   <div class="rotator-btn rotator-next-btn"></div>
  9. </div>

图片的数量需要为奇数张,否则显示会有一些异常,这是该插件的一个小bug。

CSS样式:

你需要为该旋转木马特效添加下面的一些必要的CSS样式。

  1. .rotator-main {
  2.   position: relative;
  3.   width: 900px;
  4.   height: 400px
  5. }
  6.  
  7. .rotator-main a, .rotator-main img { display: block; }
  8.  
  9. .rotator-main .rotator-list {
  10.   width: 900px;
  11.   height: 400px
  12. }
  13.  
  14. .rotator-main .rotator-list .rotator-item {
  15.   position: absolute;
  16.   left: 0px;
  17.   top: 0px
  18. }
  19.  
  20. .rotator-main .rotator-btn {
  21.   position: absolute;
  22.   height: 100%;
  23.   width: 100px;
  24.   top: 0px;
  25.   z-index: 10;
  26.   opacity: 0;
  27. }
  28.  
  29. .rotator-main .rotator-prev-btn {
  30.   left: 0px;
  31.   background: url("../image/btn_l.png") no-repeat center center;
  32.   background-color: red
  33. }
  34.  
  35. .rotator-main .rotator-next-btn {
  36.   right: 0px;
  37.   background: url("../image/btn_r.png") no-repeat center center;
  38.   background-color: red
  39. }

初始化插件:

在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该旋转木马插件。

  1. Caroursel.init($('.caroursel'))

如果你需要自定义一些参数,可以在顶层[div]元素中设置data-setting属性。

  1. <div class="caroursel rotator-main"
  2.      data-setting = '{
  3.       "width":1000,         //旋转木马的宽度
  4.       "height":270,         //旋转木马的高度
  5.       "posterWidth":640,    //当前显示的图片的宽度
  6.       "posterHeight":270,   //当前显示的图片的高度
  7.       "scale":0.8,          //缩放值
  8.       "algin":"middle",     //对齐方式
  9.       "speed":"1000",       //动画速度
  10.       "isAutoplay":"true",  //自动播放
  11.       "dealy":"1000"        //延迟时间
  12. }'>
(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!