H5でのカルーセル画像の作り方について

私はフロントエンドの初心者です。携帯電話でのタッチ スクリーン バージョンのカルーセルの実装プロセスを共有します。一般的な機能は次のとおりです。円形のスライド幅をサポートしていますが、任意に設定することはできません。ページは画面と同じ幅である必要があり、サードパーティのライブラリの原則を使用せずに、要素の切り替えを監視するようにコールバックを設定できます。 item は 375 ピクセルで、絶対配置を使用してすべての子要素を親要素内に配置し、親要素 .carousel の幅を 375px に設定します。これは、親 Element.carousel がタッチ イベントを追加するため、子要素 .item と同じ幅です。 : touchstart、touchmove、touchend 指を押すと、初期位置 (clientX) が保存され、指が左にスライドした場合は、現在の要素とスライド距離によってスライド方向が判断されます。現在の要素の右側の要素の指を右にスライドすると、指を離したときに現在の要素と左側の要素が同時に移動します。次のページに切り替えるかどうかを決定するために使用されます。移動距離は子要素の幅の 50% を超えず、現在のページは元の位置にロールバックされ、現在の要素は切り替わりません。移動距離が子要素の幅の 50% を超える場合は、現在の要素を次の要素に切り替えます

1 H5 を使用してカルーセルを実装するチュートリアルの例 (タッチ スクリーン バージョン)

はじめに: 私はフロントエンドの初心者です。携帯電話でのタッチ スクリーン バージョンのカルーセルの実装プロセスを共有します。一般的な機能は次のとおりです。画面と同じ幅である必要はありません。コールバックは、サードパーティのライブラリの原則に頼ることなく、垂直方向にスクロールできます。子要素 .item の幅は 375 ピクセルです。すべての子要素を親要素内に配置するには、親要素 .carousel の幅を 375 ピクセルに設定します。カルーセルはタッチ イベントを追加します: touchsta...

2. H5 を使用してカルーセルのタッチ スクリーン バージョンを実装する方法の詳細

はじめに: この記事では主に使用方法を紹介します。 H5 H5 はカルーセルのタッチ スクリーン バージョンを実装しています。編集者はそれを参考として共有します。エディターをフォローして一緒に見てみましょう

3. jQyery を使用してカルーセルを実装する方法をステップバイステップで説明します

はじめに: すべての主要な Web サイトでこれを参照する必要があると思います。メリーゴーランドの効果が欲しくて仕方がなかったので情報を調べてメリーゴーランドの原理を読んでゆっくり作ってみた 最終的な効果はギリギリでしたが、まとめておきたいと思います。困っている友達が助けをもたらすかもしれないので、以下を見てみましょう。

【関連Q&Aの推奨事項】:

javascript - jsはsetIntervalを使用して自動画像カルーセル機能を実装していますが、速度はますます速くなりますか?

xcode - iOS 画像カルーセル フレーム例外

ios - SDScrollview は Masonry で使用するとカルーセルを表示できませんか?

javascript - jqカルーセルの問題

以上がH5でのカルーセル画像の作り方についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。