精品国语人妻色乱码二区,免费乱理伦片在线观看2018,日韩精品视频在线播放,高潮无码又爽又刺激视频在线

<source id="8jepl"><menu id="8jepl"></menu></source>
    <source id="8jepl"><menu id="8jepl"></menu></source>
    <rp id="8jepl"><mark id="8jepl"><label id="8jepl"></label></mark></rp>
          <source id="8jepl"><menu id="8jepl"><label id="8jepl"></label></menu></source>
          <source id="8jepl"></source>
              <source id="8jepl"></source>
                <video id="8jepl"><menu id="8jepl"></menu></video>
                0712-2888027 189-8648-0214
                微信公眾號

                孝感風(fēng)信網(wǎng)絡(luò)科技有限公司微信公眾號

                當(dāng)前位置:主頁 > 技術(shù)支持 > Javascript/JQuery > JQuery響應(yīng)式內(nèi)容滑動插件bxSlider

                JQuery響應(yīng)式內(nèi)容滑動插件bxSlider

                時間:2017-03-29來源:風(fēng)信官網(wǎng) 點(diǎn)擊: 899次
                響應(yīng)式WEB設(shè)計(jì)可以讓W(xué)EB頁面自適應(yīng)各種尺寸的屏幕,儼然已經(jīng)成為了當(dāng)今WEB設(shè)計(jì)趨勢。本文將介紹一款基于jQuery的響應(yīng)式內(nèi)容滑動插件以及如何使用這款插件到你的WEB應(yīng)用中,滿足各類WEB設(shè)計(jì)需求。

                bxSlider示例效果演示:http://bxslider.com/examples

                bxSlider下載地址:http://bxslider.com/lib/jquery.bxslider.zip

                演示效果截圖:

                效果一:
                JQuery響應(yīng)式內(nèi)容滑動插件bxSlider

                效果二:
                JQuery響應(yīng)式內(nèi)容滑動插件bxSlider

                效果三:
                JQuery響應(yīng)式內(nèi)容滑動插件bxSlider

                bxSlider特性

                1.充分響應(yīng)各種設(shè)備,適應(yīng)各種屏幕;

                2.支持多種滑動模式,水平、垂直以及淡入淡出效果;

                3.支持圖片、視頻以及任意html內(nèi)容;

                4.支持觸摸滑動;

                5.支持Firefox,Chrome,Safari,iOS,Android,IE7+

                如何使用bxSlider

                1、首先是加載jQuery庫,以及bxSlider插件文件和相關(guān)CSS文件,您可以從官方網(wǎng)站下載最新版本的bxSlider。

                <link rel="stylesheet" type="text/css" href="jquery.bxslider.css"> 
                <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
                <script src="jquery.bxslider.min.js"></script>

                2、準(zhǔn)備滑動內(nèi)容,我們創(chuàng)建一個ul.bxslider,然后在其子元素li中加入滑動內(nèi)容,滑動內(nèi)容可以是圖片、視頻以及任意html內(nèi)容:

                <ul class="bxslider"> 
                      <li><img src="images/s1.jpg" /></li> 
                      <li><img src="images/s2.jpg" /></li> 
                      <li><img src="images/s3.jpg" /></li> 
                </ul>

                3、調(diào)用bxSlider插件,當(dāng)頁面內(nèi)容加載完時調(diào)用bxSlider。

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

                這樣,一個超酷的內(nèi)容滑動效果就實(shí)現(xiàn)了,查看演示demo,將瀏覽器窗口放大和縮小可以看到滑動內(nèi)容會隨著瀏覽器窗口自動調(diào)整大小。bxSlider提供了豐富的配置選項(xiàng),可以設(shè)置不同參數(shù)滿足各種客戶需求,來看它的選項(xiàng)配置。

                bxSlider選項(xiàng)設(shè)置

                bxSlider提供了豐富的選項(xiàng)可配置,以下我們列出最主要也是最常用的選項(xiàng)設(shè)置。

                參數(shù) 描述 默認(rèn)值
                mode 設(shè)置滑動模式,'horizontal':水平, 'vertical':垂直, 'fade':淡入淡出 horizontal
                speed 內(nèi)容切換速度,數(shù)字,ms 500
                startSlide 初始滑動位置,數(shù)字 0
                randomStart 隨機(jī)初始滑動位置 true
                infiniteLoop 循環(huán)滑動,如果設(shè)置為true時,則到最后滑動位置時會切換到初始位置 true
                easing 切換動畫擴(kuò)展,可以借助jQuery Easing 動畫效果擴(kuò)展設(shè)置不同的切換動畫效果 null
                captions 設(shè)置顯示圖片標(biāo)題,當(dāng)滑動內(nèi)容為圖片時并設(shè)置屬性title,可以顯示圖片標(biāo)題 false
                video 支持視頻,當(dāng)設(shè)置為true時,需要jquery.fitvids.js支持 false
                pager 設(shè)置是否顯示分頁,設(shè)置為true時,會在滑動內(nèi)容下方顯示分頁圖標(biāo) true
                controls 設(shè)置是否顯示上一副和下一幅按鈕 true
                auto 設(shè)置是否自動滑動 false
                pause 自動滑動時停留時間,數(shù)字,ms 4000
                autoHover 當(dāng)鼠標(biāo)滑向滑動內(nèi)容上時,是否暫停滑動 false

                更多bxSlider的選項(xiàng)設(shè)置,請參照bxSlider官網(wǎng):http://bxslider.com/options

                欄目列表
                推薦內(nèi)容
                熱點(diǎn)內(nèi)容
                展開