jQuery 3D旋转木马轮播图插件jquery.caroursel.js

所属分类:媒体-幻灯片和轮播图,滑块和旋转

 71253  321  查看评论 (25)
分享到微信朋友圈
X
jQuery 3D旋转木马轮播图插件jquery.caroursel.js ie兼容8

使用方法

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

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

HTML结构

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

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

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

CSS样式

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

.rotator-main {
  position: relative;
  width: 900px;
  height: 400px
}
 
.rotator-main a, .rotator-main img { display: block; }
 
.rotator-main .rotator-list {
  width: 900px;
  height: 400px
}
 
.rotator-main .rotator-list .rotator-item {
  position: absolute;
  left: 0px;
  top: 0px
}
 
.rotator-main .rotator-btn {
  position: absolute;
  height: 100%;
  width: 100px;
  top: 0px;
  z-index: 10;
  opacity: 0;
}
 
.rotator-main .rotator-prev-btn {
  left: 0px;
  background: url("../image/btn_l.png") no-repeat center center;
  background-color: red
}
 
.rotator-main .rotator-next-btn {
  right: 0px;
  background: url("../image/btn_r.png") no-repeat center center;
  background-color: red
}

初始化插件

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

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

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

<div class="caroursel rotator-main"
     data-setting = '{
      "width":1000,         //旋转木马的宽度
      "height":270,         //旋转木马的高度
      "posterWidth":640,    //当前显示的图片的宽度
      "posterHeight":270,   //当前显示的图片的高度
      "scale":0.8,          //缩放值
      "algin":"middle",     //对齐方式
      "speed":"1000",       //动画速度
      "isAutoplay":"true",  //自动播放
      "dealy":"1000"        //延迟时间
}'>


相关插件-幻灯片和轮播图,滑块和旋转

强大的js焦点图插件myFocus(完整版)

myFocus是一个专注于WEB端焦点图轮换图的JS库。该焦点图插件集成了30多种风格图片切换效果,体积小,使用简单,兼容ie6+和所有的主流浏览器。
  幻灯片和轮播图
 32068  337

jQuery自适应滑块轮播图插件zpSlide

zpSlide滑块集轮播图幻灯片,滑块集轮播图个数可自定义,并完全自适应于手机端、ipad、电脑端
  幻灯片和轮播图
 21618  185

HTML5 svg全屏图片切换遮罩动画

svg全屏图片切换遮罩动画
  幻灯片和轮播图
 25328  232

jQuery 3D旋转轮播jquery.roundabout.js

3D轮播图,每张图都有标题,并且可以附加链接,点击最上层的图片可跳转对应的链接
  幻灯片和轮播图
 44453  336

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

    小强cntv 0
    2018/12/17 14:31:52
    对齐方式就一种? 回复
    120度胡萝卜 0
    2018/11/6 21:43:25
    不兼容谷歌呀,谷歌低版本 回复
    冷暖自知 0
    2018/9/25 16:15:44
    里面引用的jquery.min.js文件哪里能下载?我想不联网情况下使用
        obsession0
        2018/11/1 11:41:06
        百度找jquery.min.js这个就行了
    回复
    -FaIr 0
    2018/6/28 14:51:31
    当图片是偶数的时候...
        obsession0
        2018/11/1 11:41:53
        其实这个效果目的也是为了突出中间那个显示,如果不是奇数的话。就跟平面的轮播没区别了不是嘛。
        粽叶飘香0
        2018/12/29 16:20:39
        问题是客户不管你那么多啊,他就添加图是偶数,让你改
    回复
    -FaIr 0
    2018/6/28 14:37:53
    permanent。 J 0
    2018/6/21 17:49:07
    只有第一张图片能定义大小吗,如果五张图片的话,怎么设置阶梯状的 回复
    我的老公许撩撩(???*)? 0
    2018/4/28 1:04:49
    请问怎么换成自己的图片呀。我一替换图片,网页里就显示不出来了
        obsession0
        2018/11/1 11:44:36
        网页显示不出来可能路径位置没搞对
    回复
    Queen 0
    2018/4/12 10:54:38
    插件很不错,就是不兼容手机端, 回复
    暗影☆?蝶 0
    2018/4/3 10:48:09
    可以添加索引值 小点点按钮
        花谢0
        2018/4/19 20:47:39
        哪里添加啊
    回复
    ∑(っ °Д °;)っ┳┳ 0
    2018/2/13 17:09:35
    加载函数在哪呀。。
    回复
取消回复