jQuery插件bxSlider實現(xiàn)響應式焦點圖
更新時間：2015年04月12日 22:26:29 投稿：hebedich
bxSlider特性1.充分響應各種設備，適應各種屏幕；2.支持多種滑動模式，水平、垂直以及淡入淡出效果；3.支持圖片、視頻以及任意html內(nèi)容；4.支持觸摸滑動；5.支持Firefox，Chrome，Safari，iOS，Android，IE7+，下面我們就來詳細探討下吧。
優(yōu)秀響應式jQuery焦點圖插件bxSlider，優(yōu)秀響應式布局設計jQuery插件，自適
應任何設備，切換內(nèi)容可以是視頻、圖片、HTML、支持觸摸設備，自定義函數(shù)
callback,支持眾多的參數(shù)自定義配置，瀏覽器支持Firefox, Chrome, Safari,
iOS, Android, IE7+。
使用方法：
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ù)選項配置請自定義配置。
查看DEMO 官網(wǎng)下載
以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡
相關文章
這篇文章主要為大家詳細介紹了jQuery藍色風格滑動導航欄特效，實現(xiàn)滑塊跟隨鼠標左右滑動，簡單、時尚、大方，有需要的小伙伴可以參考下2015-08-08
基于jQuery的360圖片展示實現(xiàn)代碼，需要的朋友可以參考下2012-06-06
有時候我們需要得到瀏覽器窗口內(nèi)容部分的高度，而不是整個窗口的高度。我試了下JQuery下的window對象，似乎讀的正是內(nèi)容部分，有點意外，不過恰好滿足了我們的要求2012-02-02
jQuery是一款非常優(yōu)秀的javascript框架，當我們使用到jQuery后就再也不想回到javascript時冗長的代碼，那么jQuery的優(yōu)化就擺在了我們的面前。那么我們優(yōu)化JQuery應該從那些方面入手呢？2014-05-05
jQuery的Ajax用戶認證和注冊技術(shù)實例教程(附demo源碼)
這篇文章主要介紹了jQuery的Ajax用戶認證和注冊技術(shù),結(jié)合完整實例較為詳細的分析講解了jQuery中ajax方法實現(xiàn)用戶驗證與注冊的相關技巧與注意事項,并附帶了demo源碼供讀者下載,需要的朋友可以參考下2015-12-12
每一段jQuery對應一段html代碼，以標記為準則,css為共用代碼，每段代碼需獨立運行。html和css代碼在文章尾部，如下例2012-02-02
這篇文章主要為大家詳細介紹了jQuery用戶頭像裁剪插件cropbox.js的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
jQuery使用zTree插件實現(xiàn)樹形菜單和異步加載
這篇文章主要介紹了jQuery使用zTree插件實現(xiàn)樹形菜單和異步加載的相關方法，感興趣的小伙伴們可以參考一下2016-02-02
history歷史記錄插件可以幫助您回到您的JavaScript支持應用程序/前進按鈕和書簽。你可以存儲到應用程序狀態(tài)的網(wǎng)址散列和恢復它的狀態(tài)。2010-12-12
這篇文章主要介紹了jQuery實現(xiàn)的自定義滾動條插件的使用方法。需要的朋友可以參考借鑒2016-12-12