幻灯片/轮播

PicCarousel - 简单jQuery旋转木马插件

面包多

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();

配置参数:

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

参数 默认值 描述
width 1000 幻灯片的宽度
height 300 幻灯片的高度
posterWidth 520 幻灯片第一帧的宽度
posterHeight 300 幻灯片第一帧的高度
scale 0.9 定义显示比例
speed 300 定义幻灯片滚动速度
autoPlay 'false' 旋转木马是否自动播放
delay 500 自动播放间隔
verticalAlign 'middle' 图片对齐位置

(0)

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

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!