jQuery全屏滾動(dòng)插件XSwitch

如何使用

需要有一個(gè)基本的HTML結(jié)構(gòu)

<!-- 插件基本結(jié)構(gòu) -->
<div id="container">
    <div class="sections">
        <div class="section" id="section0"></div>
        <div class="section" id="section1"></div>
        <div class="section" id="section2"></div>
        <div class="section" id="section3"></div>
    </div>
</div>

需要一些基礎(chǔ)的樣式支持

<style media="screen">
    __regexoperators___/*簡(jiǎn)單reset*/
    * {
        margin: 0;
        padding: 0;
    }
    __regexoperators___/*必須，關(guān)系到單個(gè)page能否全屏顯示*/
    html,
    body {
        height: 100%;
        overflow: hidden;
    }
    #container,
    .sections,
    .section {
        __regexoperators___/*必須，兼容，在瀏覽器不支持transform屬性時(shí)，通過改變top/left完成滑動(dòng)動(dòng)畫*/
        position: relative;
        __regexoperators___/*必須，關(guān)系到單個(gè)page能否全屏顯示*/
        height: 100%;
    }
    .section {
        __regexoperators___/*有背景圖時(shí)必須，關(guān)系到背景圖能夠全屏顯示*/
        background-color: #000;
        background-size: cover;
        background-position: 50% 50%;
    }
    __regexoperators___/*非必需，只是用來設(shè)置背景圖，id不會(huì)被插件用到*/
    #section0 {
        background-image: url(img/img1.jpg);
    }
    #section1 {
        background-image: url(img/img2.jpg);
    }
    #section2 {
        background-image: url(img/img3.jpg);
    }
    #section3 {
        background-image: url(img/img4.jpg);
    }
    __regexoperators___/*以下樣式用來設(shè)置slider樣式，可自行修改*/
    .pages {
        position:fixed;
        right: 10px;
        top: 50%;
        list-style: none;
    }
    .pages li {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #fff;
        margin: 15px 0 0 7px;
    }
    .pages li.active {
        margin-left: 0;
        width: 14px;
        height: 14px;
        border: 4px solid #FFFFFF;
        background: none;
    }
</style>

并引入JQuery與插件

<script src="js/jquery-1.12.3.min.js" charset="utf-8"></script>
<script src="js/pageswitch.js" charset="utf-8"></script>

插件的調(diào)用

設(shè)置了兩種調(diào)用插件的方法：

方法一 通過給div#container添加屬性data-XSwitch調(diào)用，插件將會(huì)使用默認(rèn)配置，如

<div id="container" data-XSwitch>
     ...
</div>

方法二 通過js調(diào)用，使用這種方法可設(shè)置參數(shù)

<script>
    $('#container').XSwitch({
        direction: 'horizontal'
    });
</script>

插件配置相關(guān)

/*默認(rèn)配置*/

{
    selectors: {
        sections: '.sections', //容器類名
        section: '.section', //子容器類名，即每個(gè)單頁
        page: '.pages', //slider類名 插件會(huì)生成一個(gè)ul側(cè)邊欄
        active: '.active' //被選中的slider下li的類名
    },
    index: 0,  //起始頁下標(biāo)
    easing: 'ease',  //動(dòng)畫類型，支持transition所有類型
    duration: 500,  //動(dòng)畫執(zhí)行時(shí)間 單位毫秒
    loop: false, //是否支持循環(huán)滑動(dòng)
    pagination: true, //是否分頁
    keyboard: true, //是否支持鍵盤滾動(dòng)事件
    direction: 'vertical', //滑動(dòng)方向 默認(rèn)為垂直 設(shè)置為 horizontal 將水平滑動(dòng)
    callback: '' //滑動(dòng)完成后的回調(diào)函數(shù)
}