快捷導(dǎo)航

jQuery插件bxSlider實(shí)現(xiàn)響應(yīng)式焦點(diǎn)圖

更新時(shí)間：2015年04月12日 22:26:29 投稿：hebedich

bxSlider特性1.充分響應(yīng)各種設(shè)備，適應(yīng)各種屏幕；2.支持多種滑動(dòng)模式，水平、垂直以及淡入淡出效果；3.支持圖片、視頻以及任意html內(nèi)容；4.支持觸摸滑動(dòng)；5.支持Firefox，Chrome，Safari，iOS，Android，IE7+，下面我們就來詳細(xì)探討下吧。

優(yōu)秀響應(yīng)式j(luò)Query焦點(diǎn)圖插件bxSlider，優(yōu)秀響應(yīng)式布局設(shè)計(jì)jQuery插件，自適
應(yīng)任何設(shè)備，切換內(nèi)容可以是視頻、圖片、HTML、支持觸摸設(shè)備，自定義函數(shù)
callback,支持眾多的參數(shù)自定義配置，瀏覽器支持Firefox, Chrome, Safari,
iOS, Android, IE7+。

非常優(yōu)秀響應(yīng)式j(luò)Query焦點(diǎn)圖插件bxSlider

使用方法：

1. 加載jQuery和插件

<!-- jQuery library (served from Google) --> 
<script src="jquery/1.8.2/jquery.min.js"></script> 
<!-- bxSlider Javascript file --> 
<script src="/js/jquery.bxslider.min.js"></script> 
<!-- bxSlider CSS file --> 
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />

2.HTML內(nèi)容

<ul class="bxslider"> 
 <li><img src="/images/pic1.jpg" /></li> 
 <li><img src="/images/pic2.jpg" /></li> 
 <li><img src="/images/pic3.jpg" /></li> 
 <li><img src="/images/pic4.jpg" /></li> 
</ul>

3.函數(shù)調(diào)用

$(document).ready(function(){ 
 $('.bxslider').bxSlider(); 
});

函數(shù)選項(xiàng)配置請(qǐng)自定義配置。
查看DEMO 官網(wǎng)下載

以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡

您可能感興趣的文章:

相關(guān)文章

jQuery藍(lán)色風(fēng)格滑動(dòng)導(dǎo)航欄代碼分享
這篇文章主要為大家詳細(xì)介紹了jQuery藍(lán)色風(fēng)格滑動(dòng)導(dǎo)航欄特效，實(shí)現(xiàn)滑塊跟隨鼠標(biāo)左右滑動(dòng)，簡單、時(shí)尚、大方，有需要的小伙伴可以參考下
2015-08-08
基于jQuery的360圖片展示實(shí)現(xiàn)代碼
基于jQuery的360圖片展示實(shí)現(xiàn)代碼，需要的朋友可以參考下
2012-06-06
JQuery獲取瀏覽器窗口內(nèi)容部分高度的代碼
有時(shí)候我們需要得到瀏覽器窗口內(nèi)容部分的高度，而不是整個(gè)窗口的高度。我試了下JQuery下的window對(duì)象，似乎讀的正是內(nèi)容部分，有點(diǎn)意外，不過恰好滿足了我們的要求
2012-02-02
JQuery教學(xué)之性能優(yōu)化
jQuery是一款非常優(yōu)秀的javascript框架，當(dāng)我們使用到j(luò)Query后就再也不想回到j(luò)avascript時(shí)冗長的代碼，那么jQuery的優(yōu)化就擺在了我們的面前。那么我們優(yōu)化JQuery應(yīng)該從那些方面入手呢？
2014-05-05
jQuery的Ajax用戶認(rèn)證和注冊(cè)技術(shù)實(shí)例教程(附demo源碼)
這篇文章主要介紹了jQuery的Ajax用戶認(rèn)證和注冊(cè)技術(shù),結(jié)合完整實(shí)例較為詳細(xì)的分析講解了jQuery中ajax方法實(shí)現(xiàn)用戶驗(yàn)證與注冊(cè)的相關(guān)技巧與注意事項(xiàng),并附帶了demo源碼供讀者下載,需要的朋友可以參考下
2015-12-12
jQuery學(xué)習(xí)筆記之控制頁面實(shí)現(xiàn)代碼
每一段jQuery對(duì)應(yīng)一段html代碼，以標(biāo)記為準(zhǔn)則,css為共用代碼，每段代碼需獨(dú)立運(yùn)行。html和css代碼在文章尾部，如下例
2012-02-02
jQuery用戶頭像裁剪插件cropbox.js使用詳解
這篇文章主要為大家詳細(xì)介紹了jQuery用戶頭像裁剪插件cropbox.js的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06
jQuery使用zTree插件實(shí)現(xiàn)樹形菜單和異步加載
這篇文章主要介紹了jQuery使用zTree插件實(shí)現(xiàn)樹形菜單和異步加載的相關(guān)方法，感興趣的小伙伴們可以參考一下
2016-02-02
基于jQuery的history歷史記錄插件
history歷史記錄插件可以幫助您回到您的JavaScript支持應(yīng)用程序/前進(jìn)按鈕和書簽。你可以存儲(chǔ)到應(yīng)用程序狀態(tài)的網(wǎng)址散列和恢復(fù)它的狀態(tài)。
2010-12-12
jquery滾動(dòng)條插件（可以自定義）
這篇文章主要介紹了jQuery實(shí)現(xiàn)的自定義滾動(dòng)條插件的使用方法。需要的朋友可以參考借鑒
2016-12-12