この記事では、Taobao商品詳細のカルーセルを実現するためのvideojs+swiperの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 これは videojs と swiper を参照します。この効果は、Taobao の商品詳細のカルーセル画像に似ており、最初のカルーセルはビデオです。 スワイパーマニュアル HTML部分: <!-- スワイパー カルーセル--> <div class="スワイパーコンテナ"> <div class="スワイパーラッパー"> <div class="スワイパースライド"> <video id="video" style="width: 100%;height: 100%;" controls preload="none" poster="xxxx" class="video-js vjs-big-play-centered" > <ソース src="xxxx" type="video/mp4"> </ビデオ> </div> <div class="swiper-slide"><img src="xxxx" alt=""></div> <div class="swiper-slide"><img src="xxxx" alt=""></div> <div class="swiper-slide"><img src="xxxx" alt=""></div> <div class="swiper-slide"><img src="xxxx" alt=""></div> </div> <!-- ポケベルが必要な場合 --> <div class="swiper-pagination"></div> </div> js部分: //新しいvideojsオブジェクトを作成する var player = videojs('video', { ミュート: true、 コントロール: true、 // ループ: true, }); // スワイパーカルーセル var mySwiper = new Swiper ('.swiper-container', { direction:'horizontal', // スライドショーの方向。垂直にもできます loop: true, // ループ再生 autoplay:3000, // スライド自動切り替え時間 speed:2000, // スライドスライドアニメーション時間 height: 100, pagination: '.swiper-pagination', // ページネーターが必要な場合、つまり下の小さな点が必要な場合 autoplayDisableOnInteraction : false, // この方法では、スライドしてもタイマーはクリアされません offsetWidth: 0, observer:true, // 監視 // スワイパーがスライドから別のスライドに遷移するときに、ビデオの再生を停止します (ここでは swiper3 ですが、swiper4 は別の方法で記述されています) onSlideChangeStart: 関数(スワイパー){ プレーヤーを一時停止します。 } }); //ビデオの再生中にカルーセルを停止しますplayer.on('play',function(){ // コンソールログ(mySwiper) mySwiper.stopAutoplay() }); // ビデオが一時停止されると、カルーセルは続行されます player.on('pause', function(){ mySwiper.startAutoplay() }); swiper と videojs の js と css はここでは紹介されていませんが、Baidu で検索できます。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux で文字化けしたファイルや特殊文字のファイルを削除する方法
>>: MySQL Order By 複数フィールドのソートルールのコード例
1. ユーザーにルーチン作成権限がある場合は、プロシージャ | 関数を作成できます。 2. ユーザー...
MySQL は最も人気のあるリレーショナル データベース管理システムです。WEB アプリケーションに...
<br />前回は、Web テーブルにセルの線を設定する方法を学びました。今日は、Web...
これら 2 つの属性はよく使用されますが、その違いはまとめられていません。それでは、その使い方をまと...
目次1. typeof演算子2. インスタンスオブ演算子3. typeof と instanceof...
設計業務では、設計者がレビューに参加したり、リーダーの一部が設計案の詳細が足りないと言っているのをよ...
1. mysqlbinlog: [エラー] 不明な変数 'default-character...
マスターするには: localStorage、コンポーネントのカプセル化えーと、GIF に変換したビ...
シングルノードデータベースの欠点大規模なインターネットプログラムはユーザーベースが大きいため、アーキ...
目次導入主な特徴エフェクト表示キーコード導入音声キューイングシステムは、銀行、レストラン、病院などの...
方法1: lsb_releaseユーティリティを使用するlsb_release ユーティリティは、L...
目次角度成し遂げる呼び出し順序知らせイオニックionic はページのライフサイクルをどのように処理し...
前回の記事では、JS を使って簡単な揺れ効果を実現する方法を紹介しました。ご興味があればクリックして...
序文この記事では、主にWeb開発のためのクロスドメインソリューションを紹介し、参考と学習のために共有...
目次1. バックアップ1.1 万全の準備1.2 追加の準備2 バックアップとリカバリ2.1 データの...