Bau eines 3D -rotierenden Karussells mit CSS und JavaScript

Erstellen Sie ein interaktives 3D -rotierter Karussell unter Verwendung von CSS 3D -Transformation und JavaScript, um die dynamische Anzeige von Webbildern oder Inhalten zu verbessern. In diesem Artikel führen Sie Schritt für Schritt, wie Sie diese Komponente erstellen.

Als ich dieses Thema zum ersten Mal untersucht habe, brauchte ich kein 3D -Karussell, aber der spezifischen Implementierungsdetails mehr Aufmerksamkeit. Die Kerntechnologie stammt natürlich von CSS Transformations Modul Level 1, aber in diesem Prozess werden viele andere Front-End-Entwicklungstechnologien angewendet, die alle Aspekte von CSS, SASS und Client JavaScript betreffen.

Dieses CodePen zeigt verschiedene Versionen von Komponenten und ich werde Ihnen zeigen, wie Sie sie erstellen.

Um die Einstellungen für die CSS 3D -Konvertierung zu veranschaulichen, zeige ich Ihnen die reine CSS -Version der Komponente. Ich werde Ihnen dann zeigen, wie Sie es mit JavaScript verbessern, um ein einfaches Komponentenskript zu entwickeln.

Schlüsselpunkte

• Erstellen Sie ein interaktives 3D -Rotationskarousel mit CSS 3D -Transformation und JavaScript, um Bilder oder Inhalte dynamischer auf Webseiten anzuzeigen.
• Konstruieren Sie ein Karussell, indem Sie Bilder in einem kreisförmigen 3D -Raum anordnen, wobei Polygonnäherungen basierend auf der Anzahl der Bilder verwendet werden und die Sichtbarkeit und Navigation durch JavaScript -Verbesserungen gesteuert werden.
• adaptives Design von Karussellgraphen wird durch die Verwendung von Medienabfragen und prozentualbasierter Größe in CSS erreicht, um sicherzustellen, dass sich an verschiedene Bildschirmgrößen und Geräteorientierungen anpassen kann.
• Fügen Sie Navigationskontrollen über HTML und JavaScript hinzu, um die Benutzerinteraktion zu verbessern, sodass Benutzer manuell durch Karussell -Kartenelemente schalten können.
• Erforschen Sie erweiterte Anpassungsoptionen wie Autoplay, Übergangseffekte, unendliche Schleifen und Hinzufügen von Text oder unterschiedlichen Formen, wobei flexible Anpassungsoptionen bereitgestellt werden, um den spezifischen Designanforderungen gerecht zu werden.

Charakter -Diagramm -Marke

Für das Markup ist das Bild in der Komponente in ein <figure></figure> Element eingewickelt, das ein grundlegendes Framework liefert:

<div class="carousel">
  <figure>
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    ...
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
  </figure>
</div>

Dies wird unser Ausgangspunkt sein.

Geometrische Struktur der Karussellabbildung

Bevor Sie sich CSS ansehen, skizzieren wir die Pläne, die in den folgenden Abschnitten entwickelt werden.

<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173967151412585.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript ">

Die Anzahl der Seiten dieses Polygons entspricht der Anzahl der Bilder im Karussell -Diagramm: Die Polygone von drei Bildern sind gleichseitige Dreiecke;

Was ist, wenn es weniger als drei Bilder im Karussell gibt? Das Polygon kann nicht definiert werden und der folgende Prozess kann nicht so angewendet werden. In jedem Fall ist es ziemlich nutzlos, nur ein Bild zu haben. Der Einfachheit halber werden diese Sonderfälle nicht behandelt und gehen davon aus, dass es mindestens drei Bilder gibt. Die relevante Codeänderung ist jedoch nicht schwierig.

Dieses imaginäre Referenzpolygon befindet sich im 3D -Raum, senkrecht zur Ebene des Ansichtsfensters, und drückt seine Mitte zurück zum Bildschirm. Die Entfernung entspricht seiner Mittelstrecke (die Entfernung von einer Kante des Polygons bis zu seinem Zentrum). Wie in der Abbildung unten gezeigt, zeigen Sie:

Auf diese Weise befindet sich die aktuelle Viewer-orientierte Kante in der Bildschirmebene z = 0, während das Frontbild nicht von der Perspektivverkürzung beeinflusst wird und seine normale 2D-Größe aufweist. Der Buchstaben D im Bild repräsentiert den Wert des CSS -Perspektivattributs.

Konstruieren Sie die geometrische Struktur der Karussellgrafik

In diesem Abschnitt werde ich Ihnen die wichtigsten CSS -Regeln zeigen, die ich Schritt für Schritt erklären werde.

Verwenden Sie im folgenden Code -Snippet einige SASS -Variablen, um die Konfiguration der Komponente zu erleichtern. Ich werde $n verwenden, um die Anzahl der Bilder im Karussell darzustellen und $item-width zu verwenden, um die Breite des Bildes anzugeben.

Das

<figure></figure> Element ist das Einschlussbox des ersten Bildes und auch das Referenzelement, in dem andere Bilder positioniert und transformiert werden. Angenommen, das Karussell hat jetzt nur noch ein Bild zu zeigen, kann ich mit Größe und Ausrichtung beginnen:

<div class="carousel">
  <figure>
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    ...
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
  </figure>
</div>

<figure></figure> Elemente haben eine vorgeschriebene Karussell -Elementbreite und haben die gleiche Höhe wie das Bild (sie können unterschiedliche Größen haben, müssen jedoch das gleiche Seitenverhältnis haben). Auf diese Weise wird die Karussellbehälterhöhe automatisch entsprechend der Bildhöhe eingestellt. Außerdem ist <figure></figure> horizontal im Karussellbehälter zentriert.

Das erste Bild erfordert keine zusätzliche Konvertierung, da es sich bereits in seiner Zielposition befindet, d. H. Die Vorderseite des Karussells.

kann das Karussell im 3D -Raum drehen, indem eine Rotationstransformation auf das <figure></figure> -Element angewendet wird. Diese Rotation muss in der Mitte des Polygons liegen, daher werde ich das Standardtransform-Origin von <figure></figure>:

ändern

.carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  > * {
    flex: 0 0 auto;
  }

  .figure {
    width: $item-width;
    transform-style: preserve-3d;
    img {
      width: 100%;
      &:not(:first-of-type) {
        display: none /* Just for now */
      }
    }
  }
}

Dieser Wert ist umgekehrt, da in CSS die positive Richtung der Z-Achse darin besteht, den Bildschirm zu verlassen und dem Betrachter zu stellen. Klammern sind erforderlich, um SASS -Syntaxfehler zu vermeiden. Die Berechnung des parazentrischen Polygonabstands wird später erklärt.

Nach der Konvertierung des Referenzsystems des <figure></figure> -Elements kann das gesamte Karussell durch seine (neue) y-Achse-Rotation gedreht werden:

.carousel figure {
  transform-origin: 50% 50% (-$apothem);
}

Ich werde die Details dieser Rotation später zurückgeben.

Lassen Sie uns weiterhin andere Bilder konvertieren. Unter Verwendung der absoluten Positionierung werden Bilder in <figure></figure>:

gestapelt

.carousel figure {
  transform: rotateY(/* some amount here */rad);
}

Z-Index-Wert wird ignoriert, da dies nur ein vorläufiger Schritt bei der anschließenden Konvertierung ist. Tatsächlich kann jedes Bild nun einen Winkel um die y-Achse des Karussellbildes drehen, die von den polygonalen Kanten des zugewiesenen Bildes abhängt. Erstens ändern Sie wie das <figure></figure> Element das Standard-Transformations-Origin des Bildes und bewegen Sie es in die Mitte des Polygons:

<div class="carousel">
  <figure>
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    ...
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
  </figure>
</div>

Das Bild kann dann eine Menge über seine neue y-Achse drehen, die von ($i - 1) * $theta Radians angegeben ist, wobei $i der Index des Bildes ist (ab 1), $theta = 2 * $PI / $n, wobei $PI bedeutet die mathematische Konstante π. Das zweite Bild dreht sich also $theta, das dritte dreht sich 2 * $theta und so weiter, bis sich das letzte Bild ($n - 1) * $theta dreht.

Aufgrund der hierarchischen Natur verschachtelter CSS-Transformationen wird diese relative Anordnung von Bildern während der Karussellkartenrotation erhalten (d. H. Drehung um die modifizierte y-Achse von <figure></figure>).

Die Drehzahl dieses Bildes kann mit dem SASS @for -Kontrollbefehl zugewiesen werden:

.carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  > * {
    flex: 0 0 auto;
  }

  .figure {
    width: $item-width;
    transform-style: preserve-3d;
    img {
      width: 100%;
      &:not(:first-of-type) {
        display: none /* Just for now */
      }
    }
  }
}

Dies soll die for...through Struktur anstelle von for...to verwenden, da für for...to der letzte Wert, der der Indexvariablen $i zugewiesen wird, n-1 anstelle von n sein.

Beachten Sie zwei Instanzen von Sass '#{} Interpolationssyntax. In erster Linie wird es zur Indexierung des :nth-child() -Auskurs verwendet.

Berechnen Sie den parazentrischen Abstand

Die Berechnung des parazentrischen Abstands des

Polygons hängt von der Anzahl der Kanten und der Breite der Kanten ab, d. H. Die Variablen $n und $item-width. Die Formel lautet:

.carousel figure {
  transform-origin: 50% 50% (-$apothem);
}

wobei tan() die tangenten trigonometrische Funktion ist.

Diese Formel kann durch eine gewisse Geometrie und Trigonometrie abgeleitet werden. Im Quellcode des Stifts wird diese Formel nicht so implementiert, so ist die Tangentenfunktion in SASS nicht verfügbar, sodass hartcodierte Werte verwendet werden. Stattdessen wird die Formel in einer JavaScript -Demonstration vollständig implementiert.

Intervall -Karussellartikel

Zu diesem Zeitpunkt sind die Karussellbilder nebeneinander "genäht", um die gewünschte Polygonform zu bilden. Aber hier sind sie eng gestapelt, und in einem 3D -Karussell liegt normalerweise Platz zwischen ihnen. Diese Entfernung verbessert die Wahrnehmung des 3D -Raums, da Sie ein Bild mit der Rückseite des Karussells sehen können.

Diese Lücke zwischen den Bildern kann optional hinzugefügt werden, indem eine andere Konfigurationsvariable $item-separation eingeführt und für jedes <img alt="Bau eines 3D -rotierenden Karussells mit CSS und JavaScript" > -Element als horizontale Füllung verwendet wird. Genauer gesagt, nehmen Sie die Hälfte dieses Wertes als links und rechts Füllung:

.carousel figure {
  transform: rotateY(/* some amount here */rad);
}

Das Endergebnis ist in der folgenden Demonstration zu sehen: (Der CodePen -Link sollte hier eingefügt werden, um das Intervall -Karussellelement anzuzeigen)

Das

Bild wird mithilfe des opacity -attributs durchscheinend, um die Karussellstruktur besser zu veranschaulichen, und das Flex -Layout auf dem Karussell -Wurzelelement wird verwendet, um es vertikal im Ansichtsfenster zu zentrieren.

Rotationskarousel Bild

Um die Test -Karussell -Bildrotation zu erleichtern, füge ich eine UI -Steuerung hinzu, um zwischen den Bildern hin und her zu navigieren. (Der CodePen -Link sollte hier eingefügt werden, um das rotierende Karussellbild anzuzeigen)

Wir verwenden eine Ganzzahlvariable, um anzuzeigen, welches Bild vor dem Karussell liegt. Diese Variable nimmt um eine Einheit zu oder nimmt ab, wenn der Benutzer mit der vorherigen/nächsten Taste interagiert. currImage Nach

update

wird die Karussellbildrotation auf folgende Weise durchgeführt: currImage

<div class="carousel">
  <figure>
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    ...
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
  </figure>
</div>

(hier und im folgenden Code -Snippet fügen Sie Ausdrücke mit ES6 -Vorlagenliteralen in Zeichenfolgen ein. Wenn Sie dies bevorzugen, können Sie den herkömmlichen "" Verkettungsoperator "" "" Conatscazenationsbetreiber "verwenden

wobei

der gleich ist wie zuvor: theta

.carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  > * {
    flex: 0 0 auto;
  }

  .figure {
    width: $item-width;
    transform-style: preserve-3d;
    img {
      width: 100%;
      &:not(:first-of-type) {
        display: none /* Just for now */
      }
    }
  }
}

Drehung ist

, da zum Navigieren zum nächsten Element eine Rotation gegen den Uhrzeigersinn erforderlich ist und dieser Rotationswert in der CSS -Umwandlung negativ ist. -theta

Bitte beachten Sie, dass der Wert

nicht auf den Bereich currImage beschränkt ist, sondern in positiven und negativen Richtungen unendlich wachsen kann. Wenn das Frontbild das letzte ist (also [0, numImages – 1]) und der Benutzer auf die nächste Schaltfläche klickt, wird der Drehwinkel von currImage == n-1 auf 0 auf 0 zurückgesetzt , die das Karussell in allen früheren Bildern in die entgegengesetzte Richtung drehen. Ein ähnliches Problem tritt auf, wenn die vorherige Schaltfläche klickt, wenn das vordere Bild das erste ist. currImage (n-1)*theta Um wählerisch zu sein, sollte ich sogar nach potenziellen Überläufen von

überprüfen, da der Datentyp

nicht willkürlich große Werte einnehmen kann. Diese Überprüfungen werden im Demo -Code nicht implementiert. currentImage Number

Verbessert mit JavaScript

Nachdem Sie das grundlegende CSS gesehen haben, das den Kern des Karusselldiagramms bildet, ist es nun möglich, Komponenten auf verschiedene Weise zu verbessern, indem JavaScript verwendet wird, wie z. B.

eine beliebige Anzahl von Bildern

• Prozent Breite Bild
• Mehrere Karussellinstanzen auf der Seite
• Konfiguration jeder Instanz, wie z.
Konfiguration mit HTML5-Daten-* Attribut
• Erstens entfernen ich Variablen und Regeln, die sich auf die Konvertierung von Ursprung und Drehung aus dem Stylesheet beziehen, da diese mit JavaScript durchgeführt werden: (Der aktualisierte CSS -Code sollte hier eingefügt werden)

Als nächstes ist die Funktion

im Skript für die Initanzierung der Instanz verantwortlich:

Der Parameter carousel()

bezieht sich auf das DOM -Element, das das Karusselldiagramm speichert.

.carousel figure {
  transform-origin: 50% 50% (-$apothem);
}

Normalerweise ist diese Funktion ein Konstruktor, der ein Objekt für jedes Karusselldiagramm auf der Seite erzeugt, aber hier schreibe ich keine Karussellbibliothek, sodass eine einfache Funktion ausreicht. root

, um mehrere Komponenten auf derselben Seite zu instanziieren, wartet der Code auf das Laden aller Bilder, registriert den Hörer für das

-Ereignis für das

Objekt und ruft dann

für jedes Element mit dem Klasse window: load carousel carousel()

Führen Sie drei Hauptaufgaben aus:

.carousel figure {
  transform: rotateY(/* some amount here */rad);
}

• Navigationseinstellungen. Dies ist der gleiche Code wie in der zweiten Codepen -Demonstration.
• Einstellungen
konvertieren
• Registerfenster ändern Sie die Größe des Listeners, um das Carousel -Diagramm adaptiv zu halten, um es an die neue Ansichtsfenstergröße
anzupassen.

Bevor ich den Code der Konvertierungseinstellungen überprüfen, werde ich einige wichtige Variablen abdecken und wie man sie basierend auf der Instanzkonfiguration initialisiert:

<div class="carousel">
  <figure>
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    ...
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
  </figure>
</div>

<figure></figure> Anzahl der Bilder (n) wird gemäß der Anzahl der untergeordneten Elemente des data-gap -Elements initialisiert. Der Abstand zwischen Objektträgern (Spalt) wird aus der Eigenschaft HTML5 dataset initialisiert (falls eingestellt). Das Back -Sichtbarkeitsflag (BFC) wird unter Verwendung von HTML5

API gelesen. Dies wird später verwendet, um festzustellen, ob das Bild auf der Rückseite des Karussells sichtbar ist.

CSS -Konvertierung

festlegen setupCarousel() Der Code zum Einstellen von CSS -konvertierenden Attributen ist in getComputedStyle() eingekapselt. Diese verschachtelte Funktion hat zwei Parameter. Die erste ist die Anzahl der Elemente im Karusselldiagramm, dh die oben eingeführten N -Variablen. Der zweite Parameter S ist die Seitenlänge des Karussellpolygons. Wie ich bereits erwähnt habe, entspricht dies der Breite des Bildes, sodass Sie die aktuelle Breite eines von ihnen verwenden können, indem Sie

:

.carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  > * {
    flex: 0 0 auto;
  }

  .figure {
    width: $item-width;
    transform-style: preserve-3d;
    img {
      width: 100%;
      &:not(:first-of-type) {
        display: none /* Just for now */
      }
    }
  }
}

verwenden

Auf diese Weise kann die Bildbreite unter Verwendung des prozentualen Werts festgelegt werden.

setupCarousel() Um das Carousel -Diagramm adaptiv zu halten, habe ich einen Hörer für das Fenster -Größenvergleich registriert, das erneut mit (möglicherweise geänderter) Bildgröße

:

.carousel figure {
  transform-origin: 50% 50% (-$apothem);
}

aufgerufen wird

Der Einfachheit halber habe ich die Größe des Hörers nicht abgeschlossen.

setupCarousel()

Das erste, was ich tue, ist, den parazentrischen Abstand eines Polygons unter Verwendung der bestandenen Parameter und der zuvor diskutierten Formel zu berechnen:

.carousel figure {
  transform: rotateY(/* some amount here */rad);
}

<figure></figure> Dieser Wert wird dann verwendet, um die transform-origin des

-Elements zu modifizieren, um die neue Rotationsachse des Karussells zu erhalten:

.carousel figure img:not(:first-of-type) {
  position: absolute;
  left: 0;
  top: 0;
}

Wenden Sie als nächstes den Bildstil an:

.img:not(:first-of-type) {
  transform-origin: 50% 50% (-$apothem);
}

Die erste Schleife weist die Polsterung für Platz zwischen Karussellartikeln zu. Die zweite Schleife richtet die 3D -Umwandlung ein. Die letzte Schleife behandelt die Rückseite, wenn das relevante Flag in der Karussell -Diagrammkonfiguration angegeben ist.

rotateCarousel() Rufen Sie schließlich <figure></figure> auf, um das aktuelle Bild nach vorne zu verschieben. Dies ist eine kleine Helferfunktion, die angesichts des zu angezeigten Index des Bildes das

-Element über seine y-Achse dreht, um das Zielbild nach vorne zu verschieben. Der Navigationscode verwendet ihn auch, um sich hin und her zu bewegen:

.carousel figure img {
  @for $i from 2 through $n {
    &:nth-child(#{$i}) {
      transform: rotateY(#{($i - 1) * $theta}rad);
    }
  }
}

Dies ist das Endergebnis, eine Demonstration, bei der mehrere Karussells instanziiert werden, jeweils eine andere Konfiguration: (Der endgültige Codeten -Link sollte hier eingefügt werden)

Quelle und Schlussfolgerung

Vor dem Ende möchte ich mich nur bei einigen Quellen für die Recherche dieses Tutorials bedanken: (Referenzquellen sollten hier aufgeführt sein)

Wenn Sie Fragen oder Kommentare zur Funktion des Code- oder Karusselldiagramms haben, hinterlassen Sie bitte eine Nachricht unten.

FAQ zum Bau von 3D -Rotary -Karusselldiagrammen mit CSS und JavaScript

Wie kann ich mein 3D -rotierender Karusselldiagramm anpassen?

Anpassung Ihrer 3D -rotierenden Karusselldiagramme umfasst die Verwendung von Medienabfragen in CSS. Mit Medienabfragen können Sie unterschiedliche Stile entsprechend der Bildschirmgröße Ihres Geräts auf verschiedene Geräte anwenden. Sie können die Größe und Position der Karussell -Graphenelemente an kleinere Bildschirme einstellen. Betrachten Sie auch Berührungsveranstaltungen auf mobilen Geräten, da sie keinen Schwebstatus wie Desktop -Computer haben.

Kann ich dem Karussell weitere Folien hinzufügen?

Ja, Sie können dem Karussell weitere Folien hinzufügen. In der HTML -Struktur können Sie weitere Listenelemente in einer ungeordneten Liste hinzufügen. Jedes Listenelement repräsentiert eine Folie. Denken Sie daran, den Drehwinkel jedes Objektträgers in CSS einzustellen, um sie im 3D -Raum korrekt zu positionieren.

Wie füge ich Karusselliagramme Navigationstasten hinzu?

Sie können mit HTML und JavaScript Navigationsschaltflächen zu Karusselliagrammen hinzufügen. Fügen Sie in Ihrem HTML zwei Tasten für die vorherige und nächste Navigation hinzu. Fügen Sie in Ihrem JavaScript Event -Hörer zu diesen Schaltflächen hinzu. Wenn sie klicken, sollten sie die Rotation des Karussells aktualisieren, um die vorherige oder nächste Folie anzuzeigen.

Kann ich Bilder anstelle von festen Farben als Folie verwenden?

Natürlich können Sie Bilder als Diashows verwenden. Anstatt Hintergrundfarben in CSS festzulegen, können Sie Hintergrundbilder für jede Folie festlegen. Stellen Sie sicher, dass das Bild die richtige Größe und Auflösung für den besten visuellen Effekt hat.

Wie füge ich Karusselldiagrammen automatische Wiedergabefunktion hinzu?

Autoplay kann mit JavaScript hinzugefügt werden. Mit der Funktion setInterval können Sie die Rotation des Karusselldiagramms nach einer Zeit automatisch aktualisieren. Denken Sie daran, die Intervalle zu löschen, wenn der Benutzer mit dem Karussell interagiert, um ein unerwartetes Verhalten zu verhindern.

Kann ich dem Karussell Übergangseffekte hinzufügen?

Ja, Sie können dem Karussell mit CSS Übergangseffekte hinzufügen. Mit der Eigenschaft transition können Sie über eine bestimmte Dauer von Animationsänderungen in den CSS -Eigenschaften animieren. Sie können es auf das transform -attribut anwenden, um die Rotation der Karussellkarte zu animieren.

Wie kann ich die Karussellkartenschleife unendlich machen?

Die Infinite -Schleife für Karussellgrafiken beinhaltet ein JavaScript. Wenn das Karussell den letzten Folie erreicht, können Sie seine Rotation auf den ersten Objektträger zurücksetzen. Dies gibt den Menschen die Illusion von unendlichen Schleifen.

Kann ich der Folie Text hinzufügen?

Ja, Sie können Text auf der Folie hinzufügen. In Ihrem HTML können Sie jedem Listenelement Textelemente hinzufügen. Suchen Sie in Ihrem CSS Textelemente gemäß der Position der Folie und stylen Sie sie nach Bedarf.

Wie kann man Karusselldiagrammen einen Fade -Effekt verleihen?

CSS können verwendet werden, um Abblendeffekte hinzuzufügen. Sie können das Attribut opacity in Kombination mit dem transition -attribut verwenden, um den Fade -Effekt zu animieren. Passen Sie die Diashow an die Position im Karussell ein, um den gewünschten Effekt zu erzielen. opacity

Kann ich verschiedene Formen als Karussell verwenden?

Ja, Sie können verschiedene Formen als Karussell verwenden. Die Form des Karusselldiagramms wird durch das transform -attribut in CSS bestimmt. Durch Anpassung des Wertes der Eigenschaft transform können Sie ein Karussell mit Würfeln, Zylindern oder einer anderen 3D -Form erstellen.

Das obige ist der detaillierte Inhalt vonBau eines 3D -rotierenden Karussells mit CSS und JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!