內容滑動轉場效果jquery.hwSlide.js外掛程式封裝，jqueryslide左右滑動

內容滑動轉場效果jquery.hwSlide.js外掛程式封裝，jqueryslide左右滑動

經過前兩部分的講解，我們大概知道內容滑動切換的基本開發思路和技巧，現在我們在第三部分將前面兩部分的代碼進行最佳化，封裝成一個jQuery外掛程式：jquery.hwSlide.js。開發人員可以輕鬆建立各種圖片輪播效果、焦點圖效果、圖文混排滑動效果。

下載源碼

hwSlider具有以下特性：

多個參數定製，滿足不同項目需求。
支援移動端觸控滑動。
支援圖文混排，支援各種html元素。
響應式自適應螢幕尺寸。
同一頁面支援多個滑動切換。
輕量級的，壓縮版不到4KB。
支援所有現代瀏覽器，支援ie8+。

HTML
首先在頁面head部位載入hwSlider所需的基本css樣式檔案，以及jquery庫檔案和hwSlider外掛程式，當然我建議把js檔案放在頁面底部載入。

<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代碼：

<div class="hwslider">  <ul>  <li><img src="images/s1.jpg" alt=""></li>  <li><img src="images/s2.jpg" alt=""></li>  <li>hwSlider.js</li>  </ul> </div> 

按照上面的代碼布局HTML結構，每個li元素包含一個滑塊，滑塊的內容可以是圖片、文本或圖文混排等等。

jQuery
按照jQuery外掛程式開發模板，有興趣的同學可以看看這篇文章關於jQuery外掛程式模板的介紹：jQuery彈出層外掛程式-hwLayer，我已經將代碼封裝成了jQuery外掛程式：jquery.hwSlider.js，具體的代碼請下載源碼查看。調用Flexslider外掛程式非常簡單，使用如下代碼：

$(function() {  $(".hwslider").hwSlider(); }); 

運行頁面即可看到滑塊效果。注意hwSlider預設使用滑塊的尺寸600x320，你可以通過設定選項改變預設的滑塊初始尺寸。

hwSlider選項設定
hwSlider提供了簡單實用的選項設定，供開發人員根據需求來設定。

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。