插件描述:XSwitch是一個可以高度自定義的全屏滑動JQuery插件
需要有一個基本的HTML結構
<!-- 插件基本結構 --> <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>
需要一些基礎的樣式支持
<style media="screen"> __regexoperators___/*簡單reset*/ * { margin: 0; padding: 0; } __regexoperators___/*必須,關系到單個page能否全屏顯示*/ html, body { height: 100%; overflow: hidden; } #container, .sections, .section { __regexoperators___/*必須,兼容,在瀏覽器不支持transform屬性時,通過改變top/left完成滑動動畫*/ position: relative; __regexoperators___/*必須,關系到單個page能否全屏顯示*/ height: 100%; } .section { __regexoperators___/*有背景圖時必須,關系到背景圖能夠全屏顯示*/ background-color: #000; background-size: cover; background-position: 50% 50%; } __regexoperators___/*非必需,只是用來設置背景圖,id不會被插件用到*/ #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___/*以下樣式用來設置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>
插件的調用
設置了兩種調用插件的方法:
方法一 通過給div#container添加屬性data-XSwitch調用,插件將會使用默認配置,如
<div id="container" data-XSwitch> ... </div>
方法二 通過js調用,使用這種方法可設置參數
<script> $('#container').XSwitch({ direction: 'horizontal' }); </script>
插件配置相關
/*默認配置*/
{ selectors: { sections: '.sections', //容器類名 section: '.section', //子容器類名,即每個單頁 page: '.pages', //slider類名 插件會生成一個ul側邊欄 active: '.active' //被選中的slider下li的類名 }, index: 0, //起始頁下標 easing: 'ease', //動畫類型,支持transition所有類型 duration: 500, //動畫執行時間 單位毫秒 loop: false, //是否支持循環滑動 pagination: true, //是否分頁 keyboard: true, //是否支持鍵盤滾動事件 direction: 'vertical', //滑動方向 默認為垂直 設置為 horizontal 將水平滑動 callback: '' //滑動完成后的回調函數 }