jQuery响应式浮动轮播插件floatingCarousel.js

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

 11882  67  查看评论 (14)
jQuery响应式浮动轮播插件floatingCarousel.js ie兼容10

使用方法

1、HTML

<div class="carousel" id="carousel-default">
  <ul>
    <li><span>1</span></li>
    <li><span>2</span></li>
    <li><span>3</span></li>
    <li><span>4</span></li>
    <li><span>5</span></li>
    <li><span>6</span></li>
    <li><span>7</span></li>
    <li><span>8</span></li>
    <li><span>9</span></li>
    <li><span>10</span></li>
  </ul>
</div>

2、使用默认设置初始化

$('#carousel-default').floatingCarousel();

3、自适应轮播创建

var opts = {
    // options here
},
responsiveCarousel = $('#carousel-default').floatingCarousel(opts);
$(window).resize($.debounce(100, function () {
  responsiveCarousel.update(opts);
}));

4、所有配置选项

$('#carousel-default').floatingCarousel({
  // auto scroll
  autoScroll : false,
  // or 'right'
  autoScrollDirection : 'left',
  // scroll speed in milliseconds
  autoScrollSpeed : 10000,
  // initial CSS class
  initClass: 'floatingCarouselContainer',
  // infinite loop
  looped : true,
  // or 'vertical'
  scrollerAlignment : 'horizontal',
  // scroll offset in pixels
  scrollerOffset : 0,
  // or 'slow', 'fast'
  scrollSpeed : 'medium',
  // enable touch events
  enableTouchEvents : true,
  // prevent unwanted page scrolling during touch events
  touchOverflowHidden : true,
  // reverse the the direction on touch
  reverseOnTouch : true  
});

5、回调函数

$('#carousel-default').floatingCarousel({
  beforeCreateFunction : null,
  afterCreateFunction : null
});
相关插件-幻灯片和轮播图,滑块和旋转

html5全屏幻灯片切换

html5全屏阶梯式图片幻灯片切换
  幻灯片和轮播图
 2101  11

jquery仿迅雷官方网站全屏响应式轮播图动画特效

这是一款jquery来制作的仿迅雷官方网站全屏响应式轮播图动画特效。该轮播图特效简单实用,效果时尚大方,且可以兼容ie8浏览器。
  幻灯片和轮播图
 18028  270
  幻灯片和轮播图
 26706  154

jQuery滑动式图片轮播效果

jQuery滑动式图片轮播效果兼容ie6
  幻灯片和轮播图
 13483  26

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

    嘴角上扬が??? 0
    2018/6/12 11:14:27
    怎么下载啊‘
        yúzhìchāo0
        2018/8/23 15:00:36
        回答他人问题
    回复
    安、沫楚 0
    2017/11/8 11:32:56

    下载需要完成人物好气好气好气

    回复
    女神收割机 0
    2017/10/18 13:45:48

    怎么不能下载

        骑士荣耀0
        2017/11/3 11:28:23

        meiyoujqbi

        安、沫楚0
        2017/11/8 11:35:32

        需要井壁

    回复
    Change 0
    2017/9/21 10:53:17

    怎么不能下载了??不是吧?

        0
        2017/10/10 10:28:49

        可以下载但是需要jq币,jq币要么充值要么发布资源或者回答问题

        做好自己0
        2017/12/1 9:16:44

        恩恩

    回复
    时光。 0
    2017/9/6 9:10:16

    不能下载,好气啊

        。假装斯文0
        2017/9/7 10:35:00

        是啊

        huahuaniu0
        2017/9/11 9:37:31

        怎么不能下载了

        MY11120
        2017/9/11 15:35:18

        就是

        好久不见0
        2017/10/31 14:01:43

        是啊

    回复
取消回复
  短信接口