經過前兩部分的講解,我們大概知道內容滑動切換的基本開發思路和技巧,現在我們在第三部分將前面兩部分的程式碼進行最佳化,封裝成一個jQuery插件:jquery.hwSlide.js。開發者可以輕鬆創造各種圖片輪播效果、焦點圖效果、圖文混排滑動效果。
查看演示下載源碼
多個參數定制,滿足不同項目需求。
支援行動裝置觸控滑動。
支援圖文混排,支援各種html元素。
響應式自適應畫面尺寸。
同一頁面支援多個滑動切換。
輕量級的,壓縮版不到4KB。
支援所有現代瀏覽器,支援ie8+。
首先在頁面head部位載入hwSlider所需的基本css樣式文件,以及jquery庫文件和hwSlider插件,當然我建議把js檔案放在頁面底部加載。
[code=html] <link type="text/css" rel="stylesheet" href="css/hwslider.css" /> <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.hwSlider.js"></script>
然後在body中加入以下HTML程式碼:
[code=html] <p class="hwslider"> <ul> <li><img src="images/s1.jpg" alt=""></li> <li><img src="images/s2.jpg" alt=""></li> <li>hwSlider.js</li> </ul> </p>
依照上面的程式碼佈局HTML結構,每個li元素包含一個滑桿,滑桿的內容可以是圖片、文字或圖文混排等等。
按照jQuery插件開發模板,有興趣的同學可以看看這篇文章關於jQuery插件模板的介紹:jQuery彈出層插件-hwLayer,我已經將程式碼封裝成了jQuery外掛:jquery.hwSlider.js,具體的程式碼請下載原始碼檢視。呼叫Flexslider外掛程式非常簡單,使用以下程式碼:
[code=js] $(function() { $(".hwslider").hwSlider(); });
#執行頁面即可看到滑桿效果。注意hwSlider預設使用滑桿的尺寸600x320,你可以透過設定選項來改變預設的滑桿初始尺寸。
hwSlider提供了簡單實用的選項設置,供開發者根據需求來設定。
參數 | 描述 | 預設值 |
height | 滑桿的初始高度,數字,寬度和高度用於確保自適應等比例縮放滑桿大小。 | 320 |
start | 初始滑動位置,從第幾個開始滑動,數字 | ##1|
滑動速度,單位ms,數字 | 600 | |
滑桿滑動間隔時間,單位ms,數字 | 3000 | |
是否自動滑動,布林類型true/false | #false | |
是否顯示圓點導航,布林類型true/false | true | |
是否顯示左右方向箭頭導航,布林型true/false | true | |
是否支援觸控滑動,布林型true/false | true | |
回呼函數,滑動一個滑桿後,呼叫該函數 |