モバイル h5 カルーセルプラグインのスワイプ例の詳細な説明-H5 チュートリアル-php.cn

モバイル h5 カルーセルプラグインのスワイプ例の詳細な説明

小云云

リリース： 2018-01-29 13:42:38

オリジナル

4431 人が閲覧しました

swipe.js は、軽量の js タッチスライディングクラスライブラリ、Swipe JS です。これは非常に小さな JavaScript クラスライブラリですが、その機能は単純ではありません。Web ページ上のあらゆるコンテンツを表示するために使用でき、正確なタッチ移動操作をサポートし、自動再生や比例拡大縮小なども設定できます。。

モバイル H5 ページでは、多くの効果が必要ない場合、単純な指のスライドと自動回転効果だけを必要とする場合は、スワイププラグインの方が好きですが、これは Baidu の検索で見つかりました。プラグインの説明は十分ではありませんが、必要な機能を追加します。

スワイプ機能の紹介

以下では、Swipe JS の使用方法を紹介します。基本的な関数メソッドを理解したら、それらの使用方法を見てみましょう。

最初にHTML構造:

startSlide: 4,  //起始图片切换的索引位置
auto: 3000, //设置自动切换时间，单位毫秒
continuous: true,  //无限循环的图片切换效果
disableScroll: true,  //阻止由于触摸而滚动屏幕
stopPropagation: false,  //停止滑动事件
callback: function(index, element) {},  //回调函数，切换时触发
transitionEnd: function(index, element) {}  //回调函数，切换结束调用该函数。

ログイン後にコピー

次にスタイルコード:

prev()：上一页
next()：下一页
getPos()：获取当前页的索引
getNumSlides()：获取所有项的个数
slide(index, duration)：滑动方法

ログイン後にコピー

最後にJSバインディングとパラメータ設定を設定します:

<p id="slider" class="swipe">
  <p class="swipe-wrap">
    <p></p>
    <p></p>
    <p></p>
  </p>
</p>

ログイン後にコピー

ここで、上で紹介した関数パラメータが記述されている限り、対応する関数は次のようになります。達成。

最後に、スライドスイッチに上下のボタンを追加することもできます:

.swipe {
    overflow: hidden;
    visibility: hidden;
    position: relative;
}
.swipe-wrap {
    overflow: hidden;
    position: relative;
}
.swipe-wrap > figure {
    float: left;
    width: 100%;
    position: relative;
}

ログイン後にコピー

さらに、いくつかのページネーター効果を追加します:

その時点でページングの効果が必要な場合は、次のようなコードを追加できます。

nav タグ部分はページングですブラウザの関連部分をプルし、スライドと同じ数の li タグを付けます (ページネーター効果が必要な場合は、nav タグと ul タグを追加するだけです。li タグはページングポイントを表すためです)ホイールを動的に追加する場合は動的に生成する必要があります (Play モジュール!)

var slider = Swipe(document.getElementById('slider'), {
   …………
   …………
});

ログイン後にコピー

対応するインスタンス化コード (より単純な記述メソッドを持つ子供用の靴は独自のメソッドを使用できます):

<button onclick="Swipe.prev()">prev</button>
<button onclick="Swipe.next()">next</button>

ログイン後にコピー

このプラグインにはもう 1 つの重要なポイントがあります。指がスライドモジュール上を一度スライドすると停止します。この時点で、swipe.js のソースコードを変更する必要があります。

このようにして、このプラグインは基本的に実行できます。通常、最も基本的なニーズを満たします。

モバイル h5 カルーセル プラグインのスワイプ例の詳細な説明

モバイル h5 カルーセルプラグインのスワイプ例の詳細な説明