[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