jQuery旋转木马插件PicCarousel.js

所属分类:媒体-幻灯片和轮播图

 47108  305  查看评论 (14)
分享到微信朋友圈
X
jQuery旋转木马插件PicCarousel.js ie兼容8

简要教程

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

使用方法

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

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

HTML结构

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

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

CSS样式

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

.poster-main {
  width: 1000px;
  height: 500px;
  position: relative;
  margin: 0 auto;
}
.poster-main a, .poster-main img { display: block; }
.poster-main .poster-list {
  width: 1000px;
  height: 500px;
}
.poster-main .poster-list .poster-item {
  width: 200px;
  height: 500px;
  position: absolute;
  left: 0;
  top: 0;
}
.poster-main .poster-btn {
  position: absolute;
  top: 0;
  z-index: 10;
  cursor: pointer;
}
.poster-main .poster-prev-btn {
  left: 0;
  background: url(../img/left.png) no-repeat center center;
}
.poster-main .poster-next-btn {
  right: 0;
  background: url(../img/right.png) no-repeat center center;
}

初始化插件

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

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

配置参数

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

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



相关插件-幻灯片和轮播图

jQuery自适应全屏banner滚动效果

实用的jQuery自适应全屏滚动banner,兼容效果好
  幻灯片和轮播图
 41580  265

带进度条的jQuery轮播图

带进度条jQuery轮播图,可左右切换、按钮切换
  幻灯片和轮播图
 33163  274

可嵌入图片全屏滑动

可嵌入图片视频jQuery全屏滑块
  幻灯片和轮播图
 22436  324

jQuery带缩略图轮播图插件SliderPro

jQuery基于SliderPro实现的左右布局带缩略图轮播图效果
  幻灯片和轮播图
 34143  309

讨论这个项目(14)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    花儿开不败。 0
    2018/10/12 15:59:53
    请问,用js怎么获取第一张啊 ,最中间的那张 回复
    彷徨 0
    2018/7/11 10:54:29
    用户点击按钮新增一个li 怎么做? 可以控制么?
        花儿开不败。1
        2018/10/12 16:15:07
        38行,children改成children()
    回复
    Tianma-meteor 1
    2018/1/26 14:29:51
    我想说,这个插件我发现的有两处bug,第一处,37行的ep(0),应该改成eq(0),第二处,双数item的时候,38行的children应该改成children()。
        雪地舞者0
        2018/9/13 15:11:13
        感谢大佬!解决了我的问题!
    回复
    小西平 0
    2017/11/28 15:19:23

    li双数的bug怎么解决的?微信w275753171,????

        zZzz0
        2018/1/4 14:37:50

        你随便找一个li重复放一次不就单数了

        Tianma-meteor1
        2018/1/26 14:30:32

        38行,children改成children()

    回复
    Gsdew 0
    2017/9/26 11:45:25

    请问怎么控制显示的图片数量

    回复
    Smile 0
    2017/7/15 10:35:31

    我想知道怎么把它放大最好是能满屏 新手 请详细

    回复
    ?? 迷途漫漫终有路归丶 0
    2016/11/14 16:11:55
    怎么先加载dom,在启用插件啊,我现在用是可以用,但是ajax拿数据之后就不行了 回复
    |?Sugar づ 0
    2016/10/29 22:10:17
    你好,下面能否在加个标签切换 ,切换对应的图片? 回复
    liyinSakura 0
    2016/10/26 18:10:35
    好像只能滚动图片。下面如果加标题,会被隐藏。
        liyinSakura0
        2016/10/26 18:10:21
        而且切换效果有点僵硬。
    回复
取消回复