[jQuery插件] 移动端整屏滚动的DD Full Screen Slider

DD Full Screen Slider 是一款基于 jQuery 和 jquery.mousewheel.js 的全屏滚动插件，正因为基于前面两个文件，所以它比较小，不压缩也不到 10KB。DD Full Screen Slider 有一下特点：

支持桌面和移动设备
多种方式切换：鼠标滚轮、鼠标拖拽、圆点导航、键盘方向键
支持锚点/哈希
在不支持 CSS3 动画的浏览器中自动回滚使用 jQuery 动画
支持多种浏览器，包括 IE8（部分）

教程地址：http://www.dowebok.com/181.html
代码出处：http://www.dynamicdrive.com/dynamicindex17/ddfullscreensliderdoc.htm

使用说明：

一、下载代码

在 http://www.dowebok.com/181.html 下载源代码

二、构建网页，引入相关文件

1、新建html页面，如果是移动端看的话，需要在页面头部插入视口说明：

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

2、引入相关的js和css文件。

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

三、写出你要分几屏的html结构，并配上样式

1、在页面里写出你要分几屏的html代码，并把他们都套在一个层内，假设你要分2屏，如下：

<section id="SlideBox" class="dd_fullscreenslider">    <div class="slidewrapper">        <article class="slide page1">第一屏</article>        <article class="slide page2">第二屏</article>    </div></section>

2、为这个结构配上样式，例如：

.ul.fssnav {display:none;} /*这一句让翻页按钮隐藏起来*/.page1 { background:#d3000e url(../images/p1-bg.jpg) no-repeat left bottom; background-size:100% 100%;}.page2 { background-color:#f9bd37;}

四、写入JavaScript启动代码

<script>$(window).load(function() {document.getElementById("switch").className="music-on";var fss;    $(function() {        fss = new ddfullscreenslider({            sliderid: 'SlideBox',            addHash: false,            onslide: function($slide, index) {                if (index==0) {                    $("article").siblings(".slide").removeClass("current");                    $slide.addClass("current");                }                if (index==1) {                    $("article").siblings(".slide").removeClass("current");                    $slide.addClass("current");                }                if (index==2) {                    $("article").siblings(".slide").removeClass("current");                    $slide.addClass("current");                }            }        });    });});</script>

onslide: function($slide, index) 这一段是回调函数，用来设置当前显示层的一些效果，配合下边的if条件，可以做出多种效果，例如增减样式：

if (index==0) {
(“article”).siblings(“.slide”).removeClass(“current”);slide.addClass(“current”); }

这一段就是判断如果当前页是第一页，就给第一页的article添加样式current