內(nèi)容滑動(dòng)切換效果jquery.hwSlide.js插件封裝
經(jīng)過(guò)前兩部分的講解，我們大概知道內(nèi)容滑動(dòng)切換的基本開(kāi)發(fā)思路和技巧，現(xiàn)在我們?cè)诘谌糠謱⑶懊鎯刹糠值拇a進(jìn)行優(yōu)化，封裝成一個(gè)jQuery插件：jquery.hwSlide.js。開(kāi)發(fā)者可以輕松創(chuàng)建各種圖片輪播效果、焦點(diǎn)圖效果、圖文混排滑動(dòng)效果。
hwSlider具有以下特性：
多個(gè)參數(shù)定制，滿足不同項(xiàng)目需求。
支持移動(dòng)端觸控滑動(dòng)。
支持圖文混排，支持各種html元素。
響應(yīng)式自適應(yīng)屏幕尺寸。
同一頁(yè)面支持多個(gè)滑動(dòng)切換。
輕量級(jí)的，壓縮版不到4KB。
支持所有現(xiàn)代瀏覽器，支持ie8+。
HTML
首先在頁(yè)面head部位載入hwSlider所需的基本css樣式文件，以及jquery庫(kù)文件和hwSlider插件，當(dāng)然我建議把js文件放在頁(yè)面底部加載。
<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結(jié)構(gòu)，每個(gè)li元素包含一個(gè)滑塊，滑塊的內(nèi)容可以是圖片、文本或圖文混排等等。
jQuery
按照jQuery插件開(kāi)發(fā)模板，有興趣的同學(xué)可以看看這篇文章關(guān)于jQuery插件模板的介紹：jQuery彈出層插件-hwLayer，我已經(jīng)將代碼封裝成了jQuery插件：jquery.hwSlider.js，具體的代碼請(qǐng)下載源碼查看。調(diào)用Flexslider插件非常簡(jiǎn)單，使用如下代碼：
$(function() {
$(".hwslider").hwSlider();
});
運(yùn)行頁(yè)面即可看到滑塊效果。注意hwSlider默認(rèn)使用滑塊的尺寸600x320，你可以通過(guò)設(shè)置選項(xiàng)改變默認(rèn)的滑塊初始尺寸。
hwSlider選項(xiàng)設(shè)置
hwSlider提供了簡(jiǎn)單實(shí)用的選項(xiàng)設(shè)置，供開(kāi)發(fā)者根據(jù)需求來(lái)設(shè)置。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- swiper在angularjs中使用循環(huán)輪播失效的解決方法
- 解決Angular.js中使用Swiper插件不能滑動(dòng)的問(wèn)題
- JS中利用swiper實(shí)現(xiàn)3d翻轉(zhuǎn)幻燈片實(shí)例代碼
- JS中Swiper的使用和輪播圖效果
- 移動(dòng)端觸屏幻燈片圖片切換插件idangerous swiper.js
- 非常優(yōu)秀的JS圖片輪播插件Swiper的用法
- js插件實(shí)現(xiàn)圖片滑動(dòng)驗(yàn)證碼
- jQuery使用unlock.js插件實(shí)現(xiàn)滑動(dòng)解鎖
- swiper.js插件實(shí)現(xiàn)pc端文本上下滑動(dòng)功能示例
相關(guān)文章
使用FlexiGrid實(shí)現(xiàn)Extjs表格效果方法分享
這篇文章主要分享了使用FlexiGrid實(shí)現(xiàn)Extjs表格效果方法，非常的實(shí)用，這里推薦給有相同需求的小伙伴2014-12-12
下面小編就為大家分享一篇jquery中done和then的區(qū)別(詳解)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
通過(guò)JQuery，JQueryUI和Jsplumb實(shí)現(xiàn)拖拽模塊
這篇文章主要介紹了通過(guò)JQuery，JQueryUI和Jsplumb實(shí)現(xiàn)拖拽模塊，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下2019-06-06
jquery比較簡(jiǎn)潔的軟鍵盤(pán)特效實(shí)現(xiàn)方法
這篇文章主要介紹了jquery比較簡(jiǎn)潔的軟鍵盤(pán)特效實(shí)現(xiàn)方法,實(shí)例分析了jQuery實(shí)現(xiàn)軟鍵盤(pán)特效的具體方法與功能效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03
JQuery 獲得絕對(duì),相對(duì)位置的坐標(biāo)方法
獲取頁(yè)面某一元素的絕對(duì)X,Y坐標(biāo)，可以用offset()方法：（body屬性設(shè)置margin :0;padding:0;）2010-02-02
本文主要介紹了jQuery uploadify文件上傳插件的使用方法，uploadify這個(gè)插件是基于js里面的jquery庫(kù)寫(xiě)的。結(jié)合了ajax和flash，實(shí)現(xiàn)了這個(gè)多線程上傳的功能。具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧2016-12-12
select的美化在之前的文章中也有介紹過(guò)，在本文將為大家介紹下使用css配合jquery美化select，感興趣的朋友可以參考下2013-11-11
javascript特殊用法你知道嗎？下面為大家介紹下與function函數(shù)相關(guān)的東西2013-11-11
jQuery實(shí)現(xiàn)回車鍵（Enter）切換文本框焦點(diǎn)的代碼實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)回車鍵（Enter）切換文本框焦點(diǎn)的代碼實(shí)例,需要的朋友可以參考下2014-05-05
使用jQuery中的wrap()函數(shù)操作HTML元素的教程
wrap(),顧名思義,就是包裹的意思,就是在你所在器外層包裹一層?xùn)|西,接下來(lái)我們就詳細(xì)來(lái)看使用jQuery中的wrap()函數(shù)操作HTML元素的教程:2016-05-05