幻灯片/轮播

PicCarousel - 简单jQuery旋转木马插件

创客主机


PicCarousel.js是一款简单实用的jQuery 3D旋转木马插件。该旋转木马插件设计清新简洁,非当前显示的图片采用半透明设计,形成比较强烈的立体感。

使用方法:

使用该旋转木马插件需要引入jQuery和PicCarousel.min.js文件

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

HTML结构:

PicCarousel.js旋转木马插件的HTML结构采用一个[div]容器来包裹一组无序列表,列表中放置图片。前后导航按钮分别使用一个div.poster-btn元素来制作。

  1. <div class="poster-main example">
  2.   <div class="poster-btn poster-prev-btn"></div>
  3.   <ul class="poster-list">
  4.     <li class="poster-item"><img src="1.jpg"></li>
  5.     <li class="poster-item"><img src="2.jpg"></li>
  6.     <li class="poster-item"><img src="3.jpg"></li>
  7.     <li class="poster-item"><img src="4.jpg"></li>
  8.     <li class="poster-item"><img src="5.jpg"></li>
  9.   </ul>
  10.   <div class="poster-btn poster-next-btn"></div>
  11. </div>

CSS样式:

以下是该旋转木马必须的一些CSS样式。

  1. .poster-main {
  2.   width: 1000px;
  3.   height: 500px;
  4.   position: relative;
  5.   margin: 0 auto;
  6. }
  7.  
  8. .poster-main a, .poster-main img { display: block; }
  9.  
  10. .poster-main .poster-list {
  11.   width: 1000px;
  12.   height: 500px;
  13. }
  14.  
  15. .poster-main .poster-list .poster-item {
  16.   width: 200px;
  17.   height: 500px;
  18.   position: absolute;
  19.   left: 0;
  20.   top: 0;
  21. }
  22.  
  23. .poster-main .poster-btn {
  24.   position: absolute;
  25.   top: 0;
  26.   z-index: 10;
  27.   cursor: pointer;
  28. }
  29.  
  30. .poster-main .poster-prev-btn {
  31.   left: 0;
  32.   background: url(../img/left.png) no-repeat center center;
  33. }
  34.  
  35. .poster-main .poster-next-btn {
  36.   right: 0;
  37.   background: url(../img/right.png) no-repeat center center;
  38. }

初始化插件:

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

  1. $("#TagName").PicCarousel();

配置参数:

该旋转木马插件有以下一些可用的配置参数:

参数默认值描述
width1000幻灯片的宽度
height300幻灯片的高度
posterWidth520幻灯片第一帧的宽度
posterHeight300幻灯片第一帧的高度
scale0.9定义显示比例
speed300定义幻灯片滚动速度
autoPlay'false'旋转木马是否自动播放
delay500自动播放间隔
verticalAlign'middle'图片对齐位置
(0)

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

阿里云

热评文章

发表评论

嘿,欢迎咨询!