jQuery外掛程式bxSlider實現響應式焦點圖

來源:互聯網
上載者:User

jQuery外掛程式bxSlider實現響應式焦點圖

 優秀響應式jQuery焦點圖外掛程式bxSlider,優秀響應式布局設計jQuery外掛程式,自適

應任何裝置,切換內容可以是視頻、圖片、HTML、支援觸摸裝置,自訂函數
callback,支援眾多的參數自訂配置,瀏覽器支援Firefox, Chrome, Safari,
iOS, Android, IE7+。

使用方法:

1. 載入jQuery和外掛程式

1

2

3

4

5

6

<!-- 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內容

1

2

3

4

5

6

<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.函數調用

1

2

3

$(document).ready(function(){

$('.bxslider').bxSlider();

});

函數選項配置請自訂配置。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.