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: 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:
|
<<: So löschen Sie verstümmelte oder mit Sonderzeichen versehene Dateien in Linux
>>: MySQL Order By-Codebeispiel für Sortierregeln für mehrere Felder
Inhaltsverzeichnis 1. Abhängigkeiten installieren...
CSS3 implementiert einen umdrehbaren Hover-Effekt...
Inhaltsverzeichnis Installationsfreie Version von...
Inhaltsverzeichnis MySQL-Protokolldateien binlog ...
In diesem Artikel wird hauptsächlich die Analyse ...
Übersetzen Sie diese URL: http://translateth.is G...
Inhaltsverzeichnis 1. Einfaches Seitenbeispiel 2....
Ich habe das System vor einiger Zeit neu installi...
1. Installieren Sie Zabbix Agent, um den lokalen ...
Inhaltsverzeichnis Ergebnisse erzielen Vollständi...
Installieren Sie MySQL unter Windows zu Ihrer Inf...
Inhaltsverzeichnis Diffing-Algorithmus Schicht-fü...
Schwebende Elemente führen dazu, dass ihre überge...
Navigation und andere Dinge werden bei der täglic...
Beim Verwenden der MySql-Fensterfunktion zum Samm...