hwSlider-內容滑動切換效果（三）：jquery.hwSlide.js插件封裝

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



查看演示下載源碼

#hwSlider具有以下特性：

多個參數定制，滿足不同項目需求。

   支援行動裝置觸控滑動。

   支援圖文混排，支援各種html元素。

   響應式自適應畫面尺寸。

   同一頁面支援多個滑動切換。

   輕量級的，壓縮版不到4KB。

   支援所有現代瀏覽器，支援ie8+。

HTML

首先在頁面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插件模板的介紹：jQuery彈出層插件-hwLayer，我已經將程式碼封裝成了jQuery外掛：jquery.hwSlider.js，具體的程式碼請下載原始碼檢視。呼叫Flexslider外掛程式非常簡單，使用以下程式碼：

[code=js]
$(function() { 
    $(".hwslider").hwSlider(); 
});

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

hwSlider選項設定

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