DD Full Screen Slider - jQuery全屏轮播插件

DD Full Screen Slider - jQuery全屏轮播插件

更新: 2017-06-22

阅读:1886

DD Full Screen Slider 是一款基于 jQuery 和 jquery.mousewheel.js 的全屏轮播插件,正因为基于前面两个文件,所以它比较小,不压缩也不到 10KB。支持桌面和移动设备;多种方式切换:鼠标滚轮、鼠标拖拽、圆点导航、键盘方向键;支持锚点/哈希;在不支持 CSS3 动画的浏览器中自动回滚使用 jQuery 动画;支持多种浏览器,包括 IE8(部分)

插件安装

<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script src="js/ddfullscreenslider.js"></script>
<link rel="stylesheet" href="css/ddfullscreenslider.css">

使用方法

HTML

<section id="ddfss" class="dd_fullscreenslider">
    <div class="slidewrapper">
        <article class="slide">第一屏</article>
        <article class="slide">第二屏</article>
        <article class="slide">第三屏</article>
        <article class="slide">第四屏</article>
        <article class="slide">第五屏</article>
    </div>
</section>
javascript
var fss;
$(function() {
    fss = new ddfullscreenslider({
        sliderid: 'ddfss'
    });
});

参数

  • sliderid:绑定ID(必须)
  • addHash:使用锚链接(true)
  • transitionDuration:动画持续时间,以秒为单位(0.5)
  • keycodeNavigation:键盘控制的按键值[40, 38]
  • swipeconfig:针对触摸设备的配置{peekamount: 100, mousedrag: true}
  • onslide:回调函数