Heim > Artikel > Web-Frontend > Schreiben Sie Diashows mit HTML und CSS

Schreiben Sie Diashows mit HTML und CSS

WBOYnach vorne: 2023-08-19 20:25:121346Durchsuche

Im Allgemeinen verwendet der Entwickler JavaScript, um das Verhalten zum HTML-Code hinzuzufügen. Manchmal können wir dem HTML-Code auch Verhalten mit CSS hinzufügen. Beispielsweise können wir eine Diashow mit HTML und CSS erstellen, anstatt JavaScript zu verwenden HTML.

Wir können benutzerdefinierte Keyframes erstellen, um die Folien zu animieren und eine Diashow zu erstellen

Grammatik

Benutzer können Diashows nur mit HTML und CSS erstellen, indem sie der folgenden Syntax folgen.

.slides {
   width: calc(716px * 2);
   animation: slideShow 10s ease infinite;
}
@keyframes slideShow {
   30% {margin-left: 0px;}
   70% {margin-left: calc(-716px * 1);}
}

In der obigen Syntax enthält das Div „slides“ mehrere Folien. Wir definieren die Breite des Divs „slides“ basierend auf der Gesamtzahl der darin enthaltenen Folien. Darüber hinaus haben wir der Diashow-Abteilung eine Animation hinzugefügt.

In den Diashow-Keyframes ändern wir den Wert der CSS-Eigenschaft „margin-left“, um die Folie zu ändern.

Schritte

Schritt 1 – Erstellen Sie ein div-Element und geben Sie ihm einen „übergeordneten“ Klassennamen.

Schritt 2 – Erstellen Sie ein verschachteltes div-Element und geben Sie den Klassennamen „slides“ ein. Erstellen Sie außerdem mehrere verschachtelte div-Elemente, wobei der Klassenname „element“ die Folien darstellt.

Schritt 3 – Fügen Sie außerdem den Inhalt der Folie zum div-Element mit dem Klassennamen „element“ hinzu.

Schritt 4 – Jetzt müssen wir dem „übergeordneten“ div-Element den CSS-Code hinzufügen

Schritt 5 – Legen Sie die feste Breite und Höhe für das „Element“-Div fest, das unsere Folie ist.

Schritt 6 – Berechnen Sie für das Div „Folien“ die Gesamtbreite entsprechend der Gesamtzahl der darin enthaltenen Folien und fügen Sie eine „Diashow“-Animation für eine bestimmte Dauer hinzu.

Schritt 7 – Erstellen Sie einen „Slideshow“-Keyframe, der den Wert der CSS-Eigenschaft „margin-left“ ändern soll, um die Folien zu ändern. Außerdem haben wir den Prozentsatz in der Lücke von 20 aufgeschlüsselt, da wir 4 Folien haben.

Beispiel

Im Beispiel unten haben wir 4 verschiedene Folien erstellt und Textinhalte hinzugefügt. Darüber hinaus haben wir den Pseudoselektor „n-tes Kind“ verwendet, um die n-te Folie auszuwählen und deren Schriftgröße und Textfarbe zu ändern.

<html>
<head>
   <style>
      /* set the box for the slides */
      .parent { height: 300px; width: 600px; overflow: hidden;}
      /* set height and width for slide elements */
      .element {float: left; height: 500px; width: 716px; backgroundcolor: grey;}
      /* set the width of the slides div and animation. */
      .slides { width: calc(716px * 4); animation: slideShow 10s ease infinite;}
      /* changing the font size and text color for every slide */
      .element:nth-child(1) {font-size: 2rem; color: blue;}
      .element:nth-child(2) {font-size: 3rem; color: black;}
      .element:nth-child(3) {font-size: 4rem; color: green;}
      .element:nth-child(4) {font-size: 5rem; color: pink;}
      /* creating the animation for the slideShow */
      /* for more slides, users can take percentages accordingly. */
      @keyframes slideShow {
         20% {margin-left: 0px;}
         40% {margin-left: calc(-716px * 1);}
         60% {margin-left: calc(-716px * 2);}
         80% {margin-left: calc(-716px * 3);}
      }
   </style>
</head>
<body>
   <h2> Programming a slideshow using the <i> HTML and CSS </i> only </h2>
   <div class = "parent">
      <div class = "slides">
         <div class = "element">
            <h3 class = "content"> This is a slide 1. </h3>
         </div>
         <div class = "element">
            <h3 class = "content"> This is a slide 2. </h3>
         </div>
         <div class = "element">
            <h3 class = "content"> This is a slide 3. </h3>
         </div>
         <div class = "element">
            <h3 class = "content"> This is a slide 4. </h3>
         </div>
      </div>
   </div>
</body>
</html>

In der Ausgabe können Benutzer die Diashow von 10 Sekunden sehen.

Beispiel

Im folgenden Beispiel fügen wir ein Bild als Inhalt der Diashow hinzu. Zusätzlich stellen wir die Abmessungen des Bildes auf die volle Größe des „Element“-Divs ein.

<html>
<head>
   <style>
      /* set the box for the slides */
      .parent { height: 300px; width: 600px; overflow: hidden;}
      /* set height and width for slide elements */
      .element {float: left; height: 500px; width: 716px; backgroundcolor: grey; }
      /* set the width of the slides div and animation. */
      .slides {width: calc(716px * 4); animation: slideShow 10s ease infinite;}
      img {width: 100%; height: 100%;}
      /* creating the animation for the slideshow */
      /* for more slides, users can take percentages accordingly. */
      @keyframes slideShow {
         20% {margin-left: 0px;}
         40% {margin-left: calc(-716px * 1);}
         60% {margin-left: calc(-716px * 2);}
         80% {margin-left: calc(-716px * 3);}
      }
   </style>
</head>
<body>
   <h2> Programming a slideshow using the <i> HTML and CSS </i> only </h2>
   <div class = "parent">
      <div class = "slides">
         <div class = "element">
            <img src = "https://www.stockvault.net/data/2011/05/31/124348/thumb16.jpg" alt = "image 1">
         </div>
         <div class = "element">
            <img src = "https://www.stockvault.net/data/2007/03/01/99589/thumb16.jpg" alt = "image 2">
         </div>
         <div class = "element">
            <img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTxtApKDB3clf0BZYxgUlbGiYg7m-DwYlzYd9WXS5u3_K2MjeMZ-Yj3GpWdaNaGYej52l8&usqp=CAU"  alt = "image 3">
         </div>
         <div class = "element">
            <img src = "https://thumbs.dreamstime.com/b/mani%C3%A8re-par-les-racines-vertes-de-h%C3%AAtre-de-for%C3%AAt-arbres-en-nature-41019730.jpg" alt = "image 4">
         </div>
      </div>
   </div>
</body>
</html>

In der Ausgabe können Benutzer eine Diashow mit Bildern ansehen.

Fazit

Benutzer haben gelernt, Diashows nur mit HTML und CSS zu erstellen. Es wird jedoch empfohlen, zum Erstellen von Diashows JavaScript zu verwenden, da wir damit flexibler arbeiten können. Wenn wir beispielsweise mehr als 100 Folien haben und eine Diashow erstellen müssen, wird der CSS-Code möglicherweise komplexer, da wir fest codierte Prozentwerte in Keyframes hinzufügen müssen, um die Diashow zu animieren.

Das obige ist der detaillierte Inhalt vonSchreiben Sie Diashows mit HTML und CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Welche Kategorien gibt es für Breadcrumbs in Materialise CSS?Nächster Artikel：Welche Kategorien gibt es für Breadcrumbs in Materialise CSS?

In Verbindung stehende Artikel

Mehr sehen