<video id="h99qi"><ins id="h99qi"><span id="h99qi"></span></ins></video>

        <var id="h99qi"><td id="h99qi"></td></var>
        1. <acronym id="h99qi"></acronym>
          <wbr id="h99qi"><code id="h99qi"><span id="h99qi"></span></code></wbr>

          1. <var id="h99qi"><th id="h99qi"></th></var>
            0712-2888027 189-8648-0214
            微信公眾號

            孝感風信網絡科技有限公司微信公眾號

            當前位置:主頁 > 技術支持 > Javascript/JQuery > unslider一個超小的 jQuery輪播(slider)插件

            unslider一個超小的 jQuery輪播(slider)插件

            時間:2024-01-23來源:風信官網 點擊: 889次
            unslider一個超小的 jQuery輪播(slider)插件

            跨瀏覽器
            Unslider已經在所有最新的瀏覽器上測試過了,并且對那些老舊的瀏覽器也能很出色的降級處理。

            支持鍵盤導航
            如果需要,可以加入鍵盤方向鍵導航。試一試左右方向鍵吧!

            自動調整高度
            并不是每個幻燈片都很規范,Unslider能夠自動調整高度。

            Yep,他還支持響應式布局
            如今哪個網站還不支持響應式布局就已經非常OUT了。Unslider幫你輕松搞定!

            下載地址:https://github.com/idiot/unslider/blob/master/src/unslider.min.js

            1、引入jQuery 和 Unslider

            <script src="//code.jquery.com/jquery-latest.min.js"></script>
            <script src="//unslider.com/unslider.js"></script>

            2、準備HTML代碼

            <div class="banner">
                <ul>
                    <li>This is a slide.</li>
                    <li>This is another slide.</li>
                    <li>This is a final slide.</li>
                </ul>
            </div>

            3、CSS代碼

            .banner { position: relative; overflow: auto; }
            .banner li { list-style: none; }
            .banner ul li { float: left; }

            4、JQuery代碼

            $(function() {
                $('.banner').unslider();
            });

            參數說明:

            $('.banner').unslider({
                speed: 500,               //  滾動速度
                delay: 3000,              //  動畫延遲
                complete: function() {},  //  動畫完成的回調函數
                keys: true,               //  啟動鍵盤導航
                dots: true,               //  顯示點導航
                fluid: false              //  支持響應式設計
            });

            支持觸摸屏

            如果你想增加移動端/平板等觸摸屏支持Unslider,你需要包括jQuery.event.swipe插件,就會變得很簡單!

            添加向前(previous)/向后(next)鏈接

            <!-- The HTML -->
            <a href="#" class="unslider-arrow prev">Previous slide</a>
            <a href="#" class="unslider-arrow next">Next slide</a>

            <!-- And the JavaScript -->
            <script>
                var unslider = $('.banner').unslider();

                $('.unslider-arrow').click(function() {
                    var fn = this.className.split(' ')[1];

                    //  Either do unslider.data('unslider').next() or .prev() depending on the className
                    unslider.data('unslider')[fn]();
                });
            </script>

            存取Unslider的屬性

            var slidey = $('.banner').unslider(),
                data = slidey.data('unslider');

            //  Start Unslider
            data.start();

            //  Pause Unslider
            data.stop();

            //  Move to a slide index, with optional callback
            data.move(2, function() {});
            //  data.move(0);

            //  Manually enable keyboard shortcuts
            data.keys();

            //  Move to the next slide (or the first slide if there isn't one)
            data.next();

            //  Move to the previous slide (or the last slide if there isn't one)
            data.prev();

            //  Append the navigation dots manually
            data.dots();
            熱門關鍵詞: unslider jQuery輪播 slider 插件
            欄目列表
            推薦內容
            熱點內容
            展開
            亚洲精品在线视频_18禁无码毛片精品久久久久久_精品熟妇无码av免费久久_午夜福利片