色综合网天天综合色中文男男_粉嫩jk制服美女啪啪_新版天堂资源中文在线_50岁老女人的毛片免费观看

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

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

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

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

時間:2016-08-15來源:風信官網 點擊: 1214次
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 插件
欄目列表
推薦內容
熱點內容
展開