jQuery旋转木马插件jquery.caroursel.js

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

 51503  363  查看评论 (12)
分享到微信朋友圈
X
jQuery旋转木马插件jquery.caroursel.js ie兼容8

简要教程

jquery.caroursel.js是一款非常实用的可自动轮播的jQuery旋转木马插件。该旋转木马将图片进行堆叠,轮流的将图片推送到最前面来展示,形成旋转木马的效果。

使用方法

该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"        //延迟时间
}'>


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

纯javascript仿网易轮播

这是一个用纯javascript写的仿网易轮播图效果
  幻灯片和轮播图
 35406  380

jQuery仿唯品会首页轮播图

jQuery唯品会首页轮播图,渐隐切换,代码简单易懂
  幻灯片和轮播图
 31620  346

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

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

原声 JS + Jquery + 面向对象轮播图

几个效果的轮播图,最后组成个组件效果,可供学习
  幻灯片和轮播图
 43680  392

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

    天涯浪子 0
    2018/9/6 15:06:47
    不支持跳转到指定第几个吗 回复
    -FaIr 0
    2018/6/28 15:42:46
    图片的数量需要为奇数张,否则显示会有一些异常,这是该插件的一个小bug。 确定是小bug?图片由服务器传过来,我们怎么知道是奇数还是偶数?数量控制不了的。 回复
    CNellie 0
    2017/12/15 11:35:37

    这个设置isaAutoplay不让自动轮播无效啊

        0
        2018/5/24 17:35:32
        需要在它的js文件里面设置
        obsession1
        2018/10/29 19:24:46
        把两个的isaAutoplay都换成Autoplay就可以了。亲测有用。
    回复
    不是人人都爱唱歌 0
    2017/9/18 10:47:31

     这个怎么和ie不兼容啊,在ie中图片出不来

    回复
    相守一生 0
    2017/7/5 14:50:14
    不能暂停动画啊 回复
    @li 0
    2017/6/27 10:00:46

    这个怎么做到自适应啊

    回复
    再美的梦╃也比不过你回眸 0
    2017/5/26 11:28:01

    为何没有提供跳到第几张的接口?

    回复
    Mr.宇 0
    2016/12/14 14:12:18

    插件怎么样才可以对当前居中的图片进行样式上的设置啊 类都是一样的啊

        ...0
        2017/5/12 19:56:34

        我也想问

    回复
    一碗单炒饭 0
    2016/10/22 10:10:08
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复