Fügen Sie Ihren HTML-/JavaScript-Diashows Schiebeeffekte hinzu

In diesem Artikel erfahren Sie, wie Sie Slide-In- und Slide-Out-Effekte mithilfe von HTML, CSS und JavaScript hinzufügen. Durch den dynamischen Wechsel von CSS-Klassen können wir die Animation der Folie so steuern, dass sie beim Anzeigen reibungslos hineingleitet und beim Wechseln reibungslos wieder verschwindet, wodurch das Benutzererlebnis verbessert wird. Dieser Artikel enthält detaillierte Codebeispiele und Schritte, die Ihnen dabei helfen, diesen Effekt einfach zu erzielen.

Wichtige Schritte zur Erzielung eines Gleiteffekts

Der Kern der Realisierung des Gleiteffekts von Folien besteht darin, CSS-Animationseigenschaften und JavaScript zu verwenden, um CSS-Klassen dynamisch hinzuzufügen und zu entfernen. Hier sind die detaillierten Schritte:

1. CSS-Animationsdefinition

Zunächst müssen Sie die Slide-In- und Slide-Out-Animationen in CSS definieren. Hier ist ein Beispiel:

 .slide-in {
  Animation: Slide-in 0,5s vorwärts; /* Animationsdauer 0,5 Sekunden, Endzustand nach Ende beibehalten */
}

.slide-out {
  Animation: Slide-out 0,5s nach vorne; /* Animationsdauer 0,5 Sekunden, Endzustand nach Ende beibehalten */
}

@keyframes-Slide-in {
  aus {
    transform: TranslateX(100%); /* Von rechts hineingleiten*/
    Deckkraft: 0; /* Anfangstransparenz ist 0 */
  }
  Zu {
    transform: TranslateX(0%); /* Endposition*/
    Deckkraft: 1; /* endgültige Transparenz ist 1 */
  }
}

@keyframes-Slideout {
  aus {
    transform: TranslateX(0%); /* Ausgangsposition*/
    Deckkraft: 1; /* Anfangstransparenz ist 1 */
  }
  Zu {
    transform: TranslateX(-100%); /* Nach links herausschieben*/
    Deckkraft: 0; /* endgültige Transparenz ist 0 */
  }
}

Dieser CSS-Code definiert zwei Animationen: Slide-in und Slide-out. Die Slide-In-Animation verschiebt ein Element von der rechten Seite des Bildschirms in seine normale Position und ändert es gleichzeitig von transparent in undurchsichtig. Die Slide-Out-Animation verschiebt das Element von seiner normalen Position auf die linke Seite des Bildschirms und macht es transparent. Das Schlüsselwort „forwards“ stellt sicher, dass das Element den Endzustand der Animation beibehält, nachdem die Animation beendet ist.

2. Implementierung des JavaScript-Codes

Als nächstes müssen Sie JavaScript-Code verwenden, um den Wechsel der Folien zu steuern und beim Wechsel die entsprechenden CSS-Klassen hinzuzufügen und zu entfernen. Hier ist ein Beispiel:

 Funktion showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");

  if (n > Folien. Länge) {
    slideIndex = 1;
  }
  wenn (n <p> Dieser JavaScript-Code ruft zunächst alle Folienelemente ab. Anschließend wird die aktuell angezeigte Folie (slideToHide) und die kommende Folie (slideToShow) gefunden. Für die Folie, die ausgeblendet werden muss, fügt es die Slide-Out-Klasse hinzu und lauscht auf das Animationend-Ereignis, um das Element nach Ende der Animation auszublenden. Damit die Folie angezeigt werden kann, wird die Slide-In-Klasse hinzugefügt und angezeigt.</p><p> <strong>Kernpunkte:</strong></p>

• Animationend-Ereignis: Verwenden Sie das Animationend-Ereignis, um sicherzustellen, dass das Element erst ausgeblendet wird, nachdem die Slide-Out-Animation abgeschlossen ist, um das plötzliche Gefühl zu vermeiden, dass das Element verschwindet, wenn die Animation noch nicht abgeschlossen ist.
• Klassenentfernung: Stellen Sie vor dem Hinzufügen neuer Klassen sicher, dass Sie alte Klassen entfernen, um Stilkonflikte zu vermeiden.
• Entfernen des Ereignis-Listeners: Entfernen Sie den Ereignis-Listener im Animationend-Ereignishandler, um zu verhindern, dass das Ereignis wiederholt ausgelöst wird.

3. HTML-Struktur

Die HTML-Struktur muss ein Folienelement mit der Klasse mySlides und ein Containerelement zum Umschließen aller Folien enthalten. Zum Beispiel:

 <div class="slideshow-container">
  <div class="mySlides">
    <img src="/static/imghw/default1.png" data-src="image1.jpg" class="lazy" alt="Bild 1">
  </div>
  <div class="mySlides">
    <img src="/static/imghw/default1.png" data-src="image2.jpg" class="lazy" alt="Bild 2">
  </div>
  <div class="mySlides">
    <img src="/static/imghw/default1.png" data-src="image3.jpg" class="lazy" alt="Bild 3">
  </div>
</div>

4. Vollständiges Beispiel

Durch die Kombination des oben genannten CSS-, JavaScript- und HTML-Codes können Sie eine Diashow mit Gleiteffekt erstellen. Hier ist ein vollständiges Beispiel:

 

<kopf>
  <title>Diashow mit Gleiteffekt</title>
  <stil>
    /* CSS-Code*/
    .slide-in {
      Animation: Slide-in 0,5s vorwärts;
    }

    .slide-out {
      Animation: Slide-out 0,5s nach vorne;
    }

    @keyframes-Slide-in {
      aus {
        transform: TranslateX(100%);
        Deckkraft: 0;
      }
      Zu {
        transform: TranslateX(0%);
        Deckkraft: 1;
      }
    }

    @keyframes-Slideout {
      aus {
        transform: TranslateX(0%);
        Deckkraft: 1;
      }
      Zu {
        transform: TranslateX(-100%);
        Deckkraft: 0;
      }
    }

    .mySlides {
      Anzeige: keine; /*Alle Folien im Ausgangszustand ausblenden*/
    }

    .slideshow-container {
      Position: relativ;
      Breite: 500px;
      Höhe: 300px;
      Überlauf: versteckt; /* Stellen Sie sicher, dass die Animation im Container angezeigt wird*/
    }

    .slideshow-container img {
      Breite: 100 %;
      Höhe: 100 %;
      Objektanpassung: Abdeckung; /* Stellen Sie sicher, dass das Bild den gesamten Container ausfüllt*/
    }
  

<k>

  <div class="slideshow-container">
    <div class="mySlides">
      <img src="https://via.placeholder.com/500x300/FF0000/FFFFFF?text=Image%201" alt="Image 1">
    </div>
    <div class="mySlides">
      <img src="https://via.placeholder.com/500x300/00FF00/FFFFFF?text=Image%202" alt="Image 2">
    </div>
    <div class="mySlides">
      <img src="https://via.placeholder.com/500x300/0000FF/FFFFFF?text=Image%203" alt="Image 3">
    </div>
  </div>

  <skript>
    // JavaScript-Code var slideIndex = 0;

    Funktion plusSlides(n) {
        showSlides(slideIndex = n);
    }

    Funktion currentSlide(n) {
        showSlides(slideIndex = n);
    }

    Funktion showSlides(n) {
      var i;
      var slides = document.getElementsByClassName("mySlides");

      if (n > Folien. Länge) {
        slideIndex = 1;
      }
      wenn (n 

</skript></k></stil></kopf>

Das obige ist der detaillierte Inhalt vonFügen Sie Ihren HTML-/JavaScript-Diashows Schiebeeffekte hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!