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提供了簡單實用的選項設置，供開發者根據需求來設定。

##1#speed滑動速度，單位ms，數字600interval滑桿滑動間隔時間，單位ms，數字3000autoPlay是否自動滑動，布林類型true/false#falsedotShow是否顯示圓點導航，布林類型true/falsetruearrShow是否顯示左右方向箭頭導航，布林型true/falsetrue#touch是否支援觸控滑動，布林型true/falsetrueafterSlider回呼函數，滑動一個滑桿後，呼叫該函數

參數	描述	預設值
height	滑桿的初始高度，數字，寬度和高度用於確保自適應等比例縮放滑桿大小。	320
start	初始滑動位置，從第幾個開始滑動，數字

# 以上就是hwSlider-內容滑動切換效果（三）：jquery.hwSlide.js外掛程式封裝 的內容，更多相關內容請關注PHP中文網（www.php .cn）！