CSS3-Implementierungscode für einfaches Karussellbildschneiden
|
Umsetzungsideen
btn1.onclick = ()=>{
Artikel++;
sei r = Artikel * 90;
letf.style.transform = "rotateX(" + r + "Grad)";
letf.style.transition = "alles 1en";
right.style.transform = "rotateX(" + r + "Grad)";
rechts.Stil.Übergang = „alle 1 s .3 s“;
}
btn2.onclick = ()=>{
Artikel--;
sei r = Artikel * 90;
letf.style.transform = "rotateX(" + r + "Grad)";
letf.style.transition = "alles 1en";
right.style.transform = "rotateX(" + r + "Grad)";
rechts.Stil.Übergang = „alle 1 s .3 s“;
}
Zum Schluss fügen Sie alle Codes an. Ich hoffe, es wird Ihnen helfen, das Front-End zu lernen HTML Quelltext
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Karussellbild ausschneiden</title>
</Kopf>
<Text>
<div Klasse="Box">
<ul Klasse="letf">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul Klasse="rechts">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<button id="btn1">Vorherige Seite</button><button id="btn2">Nächste Seite</button>
</body>
</html>CSS Code
*{
Rand: 0;
Polsterung: 0;
}
Körper{
Perspektive: 800px;
}
.Kasten{
Anzeige: Flex;
Breite: 600px;
Höhe: 350px;
Rand: 150px automatisch;
}
.box:hover ul li:nth-child(1){
Übergang: alle 5er;
transformieren: drehenX(360 Grad);
}
ul{
biegen: 1;
Listenstil: keiner;
Polsterung: 0;
Rand: 0;
transform-style: preserve-3d; /* 3D-Darstellung im Browser aktivieren*/
Position: relativ;
}
li{
Breite: 100 %;
Höhe: 100%;
Position: absolut;
}
li:ntes-Kind(1){
Hintergrund: URL('../images/9.jpg') keine Wiederholung;
Hintergrundgröße: 200 % 100 %;
transformieren: übersetzenZ(175px);
}
li:ntes-Kind(2){
Hintergrund: URL('../images/10.jpg') keine Wiederholung;
Hintergrundgröße: 200 % 100 %;
transformieren: rotierenX(90 Grad) übersetzenZ(175px);
}
li:ntes-Kind(3){
Hintergrund: URL('../images/11.jpg') keine Wiederholung;
Hintergrundgröße: 200 % 100 %;
transformieren: rotierenX(180 Grad) übersetzenZ(175 Pixel);
}
li:ntes-Kind(4){
Hintergrund: URL('../images/12.jpg') keine Wiederholung;
Hintergrundgröße: 200 % 100 %;
transformieren: rotierenX(-90 Grad) übersetzenZ(175px);
}
.rechts li{
Hintergrundposition-x: -300px;
}
JS-Code
lass Element = 0;
let btn1 = document.getElementById('btn1');
let btn2 = document.getElementById('btn2');
: Lassen Sie letf = document.querySelector('.letf');
rechts lassen = document.querySelector('.right')
btn1.onclick = ()=>{
Artikel++;
sei r = Artikel * 90;
letf.style.transform = "rotateX(" + r + "Grad)";
letf.style.transition = "alles 1en";
right.style.transform = "rotateX(" + r + "Grad)";
rechts.Stil.Übergang = „alle 1 s .3 s“;
}
btn2.onclick = ()=>{
Artikel--;
sei r = Artikel * 90;
letf.style.transform = "rotateX(" + r + "Grad)";
letf.style.transition = "alles 1en";
right.style.transform = "rotateX(" + r + "Grad)";
rechts.Stil.Übergang = „alle 1 s .3 s“;
}
Dies ist das Ende dieses Artikels über den Implementierungscode des einfachen CSS3-Schneidekarussells. Weitere relevante CSS3-Schneidekarussellinhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! |
<<: Implementierung des Vue-Top-Tags-Browserverlaufs
>>: Mehrere gängige Methoden zum Übergeben zusätzlicher Parameter beim Senden eines Formulars
Artikel empfehlen
Verwenden Sie CSS-Variablen, um coole und erstaunliche Schwebeeffekte zu erzielen
Kürzlich habe ich auf der Grover-Website eine lus...
Lösung für das Problem, dass Ubuntu in der virtuellen Maschine keine Verbindung zum Internet herstellen kann
Es ist sehr mühsam, eine virtuelle Maschine einzu...
Der Docker-Container wird direkt ausgeführt, um den öffentlichen IP-Vorgang über Ping abzurufen
Holen Sie sich die lokale öffentliche IP-Adresse ...
Einfache Implementierung von HTML zum Erstellen eines persönlichen Lebenslaufs
Lebenslauf-Code: XML/HTML-CodeInhalt in die Zwisc...
5 Befehle zur Verwendung des Rechners in der Linux-Befehlszeile
Hallo zusammen, ich bin Liang Xu. Bei der Verwend...
Tutorial zur Installation und Konfiguration von MySQL für die kostenlose Installationsversion von Win10
Ich habe viel online gesucht und festgestellt, da...
So beheben Sie den abnormalen Start von mysql5.7.21
Ein Kollege meldete, dass eine MySQL-Instanz aufg...
Welche Vorteile bietet die Verwendung des B+-Baumindex in MySQL?
Bevor wir dieses Problem verstehen, schauen wir u...
js-Simulation, um den Effekt der Bildvergrößerung auf der Jingdong-Detailseite zu erzielen
In diesem Artikel wird der spezifische Code von j...
Lösung für das Problem „Tabelle mysql.plugin existiert nicht“ beim Deployment von MySQL
Heute habe ich die kostenlose Version von MySQL i...
Docker implementiert das erneute Taggen und Löschen des Images des ursprünglichen Tags
Die Docker-Image-ID ist eindeutig und kann ein Im...
Unterschiede zwischen MySQL MyISAM und InnoDB
Der Unterschied: 1. InnoDB unterstützt Transaktio...
Beispiel-Tutorial für geplante MySQL-Aufgaben
Vorwort Seit MySQL 5.1.6 wurde eine einzigartige ...
Lösung für das Problem, dass es beim Klicken auf „Alles auswählen“ in der Shuttle-Box von Element bei großen Datenmengen hängen bleibt
Inhaltsverzeichnis Lösung 1: Kopieren Sie die Übe...
Ein kurzer Vortrag über den Diff-Algorithmus in Vue
Inhaltsverzeichnis Überblick Virtueller Dom Prinz...