Videojs+Swiper realisiert Taobao-Produktdetailkarussell

Videojs+Swiper realisiert Taobao-Produktdetailkarussell

In diesem Artikel wird der spezifische Code von videojs+swiper zur Realisierung des Karussells mit Taobao-Produktdetails zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

Dieses verweist auf Videojs und Swiper. Der Effekt ähnelt den Karussellbildern in den Taobao-Produktdetails und das erste Karussell ist ein Video:
Wenn die Videowiedergabe beginnt, stoppt das Karussell. Wenn das Video angehalten wird, läuft das Karussell weiter.
Wenn Sie während der Videowiedergabe zur nächsten Folie wechseln, wird das Video angehalten.

Swiper-Handbuch

HTML-Teil:

<!-- Swiper-Karussell-->
<div Klasse="Swiper-Container">
   <div Klasse="swiper-wrapper">
       <div Klasse="swiper-slide">
           <video id="video" style="Breite: 100%;Höhe: 100%;" steuert Vorladen="keine" poster="xxxx" class="video-js vjs-big-play-centered" >
            <Quelle src="xxxx" Typ="video/mp4">
           </video>
       </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>
   <!-- Wenn Sie einen Pager benötigen -->
   <div Klasse="swiper-pagination"></div>
</div>

js-Teil:

//Erstelle ein neues Videojs-Objekt var player = videojs('video', {
     stummgeschaltet: wahr,
     Kontrollen: wahr,
     // Schleife: true,
 });

 // Swiper-Karussell var mySwiper = neuer Swiper ('.swiper-container', {
     direction:'horizontal', // Die Richtung der Diashow, kann auch vertikal sein loop: true, // Schleife abspielen autoplay:3000, // Zeit für automatisches Umschalten der Folie speed:2000, // Zeit für die Gleitanimation der Folie height: 100,
     Paginierung: '.swiper-pagination', // Wenn Sie einen Paginator benötigen, also den kleinen Punkt unter autoplayDisableOnInteraction: false, // Auf diese Weise wird der Timer nicht gelöscht, selbst wenn wir schieben offsetWidth: 0,
     observer:true, //Monitor // Wenn swiper von einer Folie zur nächsten wechselt, ausführen: Videowiedergabe stoppen (hier ist swiper3, swiper4 wird anders geschrieben)
     beimStartenderFolienänderung: Funktion(Swiper){
          Spieler.Pause();
     }
 });


 //Stoppen Sie das Karussell, während das Video abgespielt wirdplayer.on('play',function(){
     // console.log(meinSwiper)
     mySwiper.stopAutoplay()
 });

 // Wenn das Video angehalten wird, wird das Karussell fortgesetzt player.on('pause', function(){
     mySwiper.startAutoplay()
 });

Das JS und CSS von Swiper und VideoJS werden hier nicht vorgestellt, Sie können auf Baidu danach suchen.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • JavaScript zum Erzielen eines Taobao-Produktbild-Umschalteffekts
  • Javascript zur Realisierung einer Produktbildlupe
  • JavaScript implementiert Produktdetails der E-Commerce-Plattform

<<:  So löschen Sie verstümmelte oder mit Sonderzeichen versehene Dateien in Linux

>>:  MySQL Order By-Codebeispiel für Sortierregeln für mehrere Felder

Artikel empfehlen

Schritte zur Einführung von PWA in ein Vue-Projekt

Inhaltsverzeichnis 1. Abhängigkeiten installieren...

Mit CSS3 lässt sich ein umdrehbarer Hover-Effekt erzielen

CSS3 implementiert einen umdrehbaren Hover-Effekt...

Detailliertes Tutorial zur MySQL-Installation und -Konfiguration

Inhaltsverzeichnis Installationsfreie Version von...

MySQL stellt Daten über Binlog wieder her

Inhaltsverzeichnis MySQL-Protokolldateien binlog ...

Analyse von Mysql-Datenmigrationsmethoden und -Tools

In diesem Artikel wird hauptsächlich die Analyse ...

Gemeinsame Nutzung von zwei Plug-Ins zur Übersetzung von Webseiten

Übersetzen Sie diese URL: http://translateth.is G...

Detaillierte Erklärung des Unterschieds zwischen Uniapp und Vue

Inhaltsverzeichnis 1. Einfaches Seitenbeispiel 2....

Detaillierte Analyse des React Diff-Prinzips

Inhaltsverzeichnis Diffing-Algorithmus Schicht-fü...

Vue implementiert eine gleitende Navigation oben links und rechts

Navigation und andere Dinge werden bei der täglic...