首頁  >  文章  >  web前端  >  hwSlider-內容滑動切換效果(三):jquery.hwSlide.js插件封裝

hwSlider-內容滑動切換效果(三):jquery.hwSlide.js插件封裝

黄舟
黄舟原創
2017-02-24 14:41:531625瀏覽

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


hwSlider-內容滑動切換效果(三):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)!


陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn