精品人人槡人妻人人槡,无码午夜国产视频,日韩精品无码有码视频,国产成人精品日本亚洲成熟

<var id="lf53i"><track id="lf53i"><ins id="lf53i"></ins></track></var>

  • <rp id="lf53i"></rp>
    <var id="lf53i"><track id="lf53i"><ins id="lf53i"></ins></track></var>

    <video id="lf53i"></video>
    <b id="lf53i"><acronym id="lf53i"></acronym></b>

      1. 0712-2888027 189-8648-0214
        微信公眾號

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

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

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

        時間:2024-10-02來源:風信官網(wǎng) 點擊: 1179次
        unslider一個超小的 jQuery輪播(slider)插件

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

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

        自動調(diào)整高度
        并不是每個幻燈片都很規(guī)范,Unslider能夠自動調(diào)整高度。

        Yep,他還支持響應式布局
        如今哪個網(wǎng)站還不支持響應式布局就已經(jīng)非常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();
        });

        參數(shù)說明:

        $('.banner').unslider({
            speed: 500,               //  滾動速度
            delay: 3000,              //  動畫延遲
            complete: function() {},  //  動畫完成的回調(diào)函數(shù)
            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 插件
        欄目列表
        推薦內(nèi)容
        熱點內(nèi)容
        展開