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

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

 33892  114  查看评论 (9)
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"        //延迟时间
}'>


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

jQuery响应式轮播图插件hwSlider

jQuery响应式轮播图插件hwSlider,支持移动端触屏滑动,同时还兼容低版本ie浏览器。
  幻灯片和轮播图
 16349  95

jQuery.slidizle可完全自定义的响应式jQuery幻灯片插件

jQuery.slidizle是一款可完全自定义的响应式jQuery幻灯片插件。该插件只是将一些class类放置到幻灯片的HTML标签中,用户可以通过修改这些class来修改幻灯片的外观。
  幻灯片和轮播图
 14229  84

魔兽世界轮播图

很简单的一款小插件 希望大家喜欢
  幻灯片和轮播图
 6552  9

迅雷首页官网多图焦点图特效

模拟迅雷首页的幻灯片切换效果
  幻灯片和轮播图
 16040  49

讨论这个项目(9)回答他人问题或分享插件使用方法奖励jQ币

    cccccQ 0
    2017/6/14 16:02:08

    一直套用,更??片后不??是怎?回事  /黑人????

    回复
    山川同学 0
    2017/6/8 17:47:28

    "zIndex":zLoop1-- 应该为 "zIndex":--zLoop1,

    回复
    The Bad 0
    2017/5/18 15:21:21
    这个图片之间的间距能调吗 回复
    //你听得到\ 0
    2017/4/24 9:49:49

    这个有一个BUG就是从第一张图往第6张图点的时候,它会多显示一次第一张图

    回复
    ArtiaPaNico 0
    2016/9/23 15:09:55
    修罗珊珊 0
    2016/8/19 20:08:36
    用最新JQ的话,   就。。。。。
        独钓寒江雪0
        2017/1/17 10:39:02

        还是可以用啊

    回复
    たいよう? 0
    2016/8/19 11:08:44
    很不错
        ╁╊也许有那么一天0
        2017/11/16 10:14:35

        可以的

    回复
取消回复