简介
DD Full Screen Slider 是一款基于 jQuery 和 jquery.mousewheel.js 的全屏滚动插件,正因为基于前面两个文件,所以它比较小,不压缩也不到 10KB。DD Full Screen Slider 有一下特点:
- 支持桌面和移动设备
- 多种方式切换:鼠标滚轮、鼠标拖拽、圆点导航、键盘方向键
- 支持锚点/哈希
- 在不支持 CSS3 动画的浏览器中自动回滚使用 jQuery 动画
- 支持多种浏览器,包括 IE8(部分)
浏览器兼容
IE8+ ✔ | Chrome ✔ | Firefox ✔ | Opera ✔ | Safari ✔ |
IE 系列中,IE10+ 效果正常,IE9 中无动画效果。
使用方法
1、引入文件
<link rel="stylesheet" href="https://www.dowebok.com/css/ddfullscreenslider.css" rel="external nofollow" > <script src="https://www.dowebok.com/js/jquery-1.11.3.min.js"></script> <script src="https://www.dowebok.com/js/jquery.mousewheel.min.js"></script> <script src="https://www.dowebok.com/js/ddfullscreenslider.js"></script>
2、HTML
<section id="dowebok" 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>
3、JavaScript
var fss; $(function() { fss = new ddfullscreenslider({ sliderid: 'dowebok' }); });
配置
属性/方法 | 类型 | 默认值 | 说明 |
---|---|---|---|
sliderid(必须) | 字符串 | 空 | 绑定ID |
addHash | 布尔值 | true | 使用锚链接 |
transitionDuration | 数字 | 0.5 | 动画持续时间,以秒为单位 |
keycodeNavigation | 数组 | [40, 38] | 键盘控制的按键值 |
swipeconfig | 对象 | {peekamount: 100, mousedrag: true} | 针对触摸设备的配置 |
onslide | 函数 | 空 | 回调函数 |
插件来自 Dynamic Drive。
[b2_file link="
百度网盘" name="DD Full Screen Slider – jQuery全屏滚动插件" pass="" code=""]