日韩亚洲AV无码一区二区三区|av在线国产哟哟|国产精品人人爽人人爽AV|免费一区二区精品无码视频

<th id="kwciy"><video id="kwciy"></video></th>
<code id="kwciy"><em id="kwciy"><optgroup id="kwciy"></optgroup></em></code>
    1. <center id="kwciy"></center>

      <code id="kwciy"></code>

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

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

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

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

      時間:2016-08-15來源:風(fēng)信官網(wǎng) 點(diǎn)擊: 1214次
      unslider一個超小的 jQuery輪播(slider)插件

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

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

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

      Yep,他還支持響應(yīng)式布局
      如今哪個網(wǎng)站還不支持響應(yī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、準(zhǔn)備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,               //  啟動鍵盤導(dǎo)航
          dots: true,               //  顯示點(diǎn)導(dǎo)航
          fluid: false              //  支持響應(yīng)式設(shè)計
      });

      支持觸摸屏

      如果你想增加移動端/平板等觸摸屏支持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();
      熱門關(guān)鍵詞: unslider jQuery輪播 slider 插件
      欄目列表
      推薦內(nèi)容
      熱點(diǎn)內(nèi)容
      展開