zepto で swipe.js を使用して、swipeUp と swipeDown が機能しないカルーセル画像を作成する

zepto で swipe.js を使用して、swipeUp と swipeDown が機能しないカルーセル画像を作成する_javascript スキル

WBOY

リリース： 2016-05-16 15:42:01

オリジナル

2062 人が閲覧しました

モバイル Web 開発では、モバイルインターフェースが小さいため、より多くの画像を表示するためにカルーセルがよく使用されます。また、他の人や Baidu に相談した後、私は個人的にスワイプが必要だと感じました。 jsを使った方が良いです。

他の js ライブラリとともにインポートする必要のない純粋な JavaScript ツールです。jQuery や zepto とも互換性があり、圧縮バージョンのサイズはわずか 6 kb で、モバイル開発に適しています。 🎜>https://github.com/thebird/swipe

git での使用方法は非常に明確です。キーコードは次のとおりです。

<div id='slider' class='swipe'>
 <div class='swipe-wrap'>
  <div></div>
  <div></div>
  <div></div>
 </div>
</div>
.swipe {
 overflow: hidden;
 visibility: hidden;
 position: relative;
}
.swipe-wrap {
 overflow: hidden;
 position: relative;
}
.swipe-wrap > div {
 float:left;
 width:100%;
 position: relative;
}

ログイン後にコピー

window.mySwipe = Swipe(document.getElementById('slider'),opt);

ログイン後にコピー

.swipe のネストされた .swipe-wrap の HTML ツリーモデルは変更しないのが最善です。最も内側の div については、li などの他のものに置き換えることができます。

カルーセルの作成を完了するには、ほんの数個のコードだけが必要ですが、実際のプロジェクト、特にホームページの上部にあるバナーでは、ページインデックスとコントロールのパラメーターを追加する必要があります。、

その主なパラメータ構成は次のとおりです:

startSlide Integer (デフォルト:0) - スクロールを開始する位置

speed 整数 (デフォルト:300) - アニメーションのスクロール間隔 (秒)

auto Integer - 自動スライドショーを開始します (スライド間の時間 (ミリ秒単位))

連続ブール値 (デフォルト: true) - 無限ループを作成します (すべてのアニメーションが終了したときにループ内でスライドするかどうか)

disableScroll ブール値 (デフォルト:false) - スクロールバーをスクロールするときにスライドのスクロールを停止するかどうか

stopPropagation Boolean (デフォルト:false) - イベントのバブリングを停止するかどうか

コールバック関数 - スライドショー実行中のコールバック関数

transitionEnd 関数 - アニメーション終了時のコールバック関数

彼の主な API 関数は次のとおりです:

prev()：前のページ

next(): 次のページ

getPos(): 現在のページのインデックスを取得します

getNumSlides(): すべてのアイテムの数を取得します

slide(index,duration): スライド方式

以下はプロジェクトで使用される実際のコードです

<div class="banner">
      <div id="slider" class="swipe">
        <ul class="swipe-wrap">
          <li>
            <a href="javascript:void(0)">
              <img src="img/1.jpg">
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <img src="img/2.jpg">
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <img src="img/3.jpg">
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <img src="img/4.jpg">
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <img src="img/5.jpg">
            </a>
          </li>
        </ul>
        <ul class="slide-trigger">
          <li class="cur"></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
.banner {
        width: 100%;
        position: relative;
      }
      .banner .swipe {
        overflow: hidden;
        position: relative;
      }
      .banner .swipe-wrap {
        overflow: hidden;
        position: relative;
        list-style: none;
      }
      .banner .swipe-wrap li {
        float: left;
        position: relative;
      }
      .banner img {
        width: 100%;
        vertical-align: middle;
      }
      .banner .slide-trigger {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        z-index: 10;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        list-style: none;
      }
      .banner .slide-trigger li {
        width: 10px;
        height: 10px;
        background: #FFF;
        margin: 5px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;
      }
      .banner .slide-trigger .cur {
        background: #2fc7c9;
      }
var slider = $('#slider');
    slider.find(".slide-trigger").find("li").eq(0).addClass("cur");
    window.mySwipe = new Swipe(document.getElementById('slider'), {
      speed: 400,
      auto: 3000,
      callback: function(index, elem) {
        slider.find(".slide-trigger").find("li").eq(index).addClass("cur").siblings().removeClass("cur");
      }
    });

ログイン後にコピー

ゼプトでのスワイプアップとスワイプダウンは効果がありません

zepto を見ていて、その中のいくつかのイベントを見たときに問題を見つけました:

$(‘body').swipeUp(function(e){
alert(‘swipeUp');//偶尔有效
})
$(‘body').swipeDown(function(e){
alert(‘swipeDown');//偶尔有效
})
$(‘body').tap(function(){
alert(‘tap');//ok
})
$(‘body').swipeLeft(function(){
alert(‘swipeLeft');//ok
})
$(‘body').swipeRight(function(){
alert(‘swipeRight');//ok
})

ログイン後にコピー

モバイル端末では、swipeUp と swipeDown は機能しませんが、他の機能は機能します。何が起こっているのでしょうか?

解決策 1:

Zepto は touch.js モジュールを導入する必要があります。公式 Web サイトでは入手できません。github にアクセスしてダウンロードし、touch.js を導入します。

解決策 2:

はブラウザのデフォルトのプルダウンイベントがブロックされているためで、以下のコードが追加されています。

document.addEventListener('touchmove', function (event) {
event.preventDefault();
}, false);

ログイン後にコピー