Wie füge ich mit CSS+JS Text zu Folien hinzu? Rotationsumschaltung von Folien implementieren (Code beigefügt)

Der Inhalt dieses Artikels besteht darin, vorzustellen, wie man mit CSS + JS Text auf Folien hinzufügt. Implementieren Sie den Rotationswechsel von Folien (Code beigefügt). Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Im vorherigen Artikel [Wie erziele ich einen Folieneffekt mit CSS? Die Implementierungsmethode der Diashow] stellt die Implementierungsmethode der Ein- und Ausblendfolie vor. Auf dieser Grundlage wird in diesem Artikel erläutert, wie Sie Text auf der Folie hinzufügen und mit der Folie wechseln können in and out Methode zum Konvertieren des Effekts in einen Karussell-Umschalteffekt (Code beigefügt).

Lassen Sie uns nun den Effekt Schritt für Schritt implementieren (Sie können zum vorherigen Artikel gehen, um den Code zum Erzielen des Folieneffekts zu erhalten).

5. Text zur Folie hinzufügen

Es gibt viele Möglichkeiten, dieses Problem zu lösen, aber der einfachste Weg ist vielleicht, dem Link einige Titelattribute hinzuzufügen und ihn mithilfe von CSS auf dem Bild anzuzeigen Sie sind:

HTML-Code:

<div id="stage">
	<a href="img/1.jpg" title="图片1"><img  src="/static/imghw/default1.png"  data-src="img/1.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="Wie füge ich mit CSS+JS Text zu Folien hinzu? Rotationsumschaltung von Folien implementieren (Code beigefügt)" ></a>
	<a href="img/2.jpg" title="图片2"><img  src="/static/imghw/default1.png"  data-src="img/2.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="Wie füge ich mit CSS+JS Text zu Folien hinzu? Rotationsumschaltung von Folien implementieren (Code beigefügt)" ></a>
	<a href="img/Wie füge ich mit CSS+JS Text zu Folien hinzu? Rotationsumschaltung von Folien implementieren (Code beigefügt)" title="图片3"><img  src="/static/imghw/default1.png"  data-src="img/4.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="Wie füge ich mit CSS+JS Text zu Folien hinzu? Rotationsumschaltung von Folien implementieren (Code beigefügt)" ></a>
	<a href="img/4.jpg" title="图片4"><img  src="/static/imghw/default1.png"  data-src="img/4.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="Wie füge ich mit CSS+JS Text zu Folien hinzu? Rotationsumschaltung von Folien implementieren (Code beigefügt)" ></a>
	<a href="img/5.jpg" title="图片5"><img  src="/static/imghw/default1.png"  data-src="img/5.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="Wie füge ich mit CSS+JS Text zu Folien hinzu? Rotationsumschaltung von Folien implementieren (Code beigefügt)" ></a>
	<a href="img/6.jpg" title="图片6"><img  src="/static/imghw/default1.png"  data-src="img/6.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="Wie füge ich mit CSS+JS Text zu Folien hinzu? Rotationsumschaltung von Folien implementieren (Code beigefügt)" ></a>
	<a href="img/7.jpg" title="图片7"><img  src="/static/imghw/default1.png"  data-src="img/7.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="Wie füge ich mit CSS+JS Text zu Folien hinzu? Rotationsumschaltung von Folien implementieren (Code beigefügt)" ></a>
	<a href="img/8.jpg" title="图片8"><img  src="/static/imghw/default1.png"  data-src="img/8.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="Wie füge ich mit CSS+JS Text zu Folien hinzu? Rotationsumschaltung von Folien implementieren (Code beigefügt)" ></a>
</div>

CSS-Code:

#stage a::after {
    position: absolute;
    left: 11px;
    bottom: 11px;
    padding: 2px 0;
    width: calc(100% - 22px);
    background: rgba(0,0,0,0.5);
    text-align: center;
    content: attr(title);
    font-size: 1.1em;
    color: #fff;
  }	

Keine weiteren Änderungen außer dem Hinzufügen des Title-Attributs zu unseren Links, wir haben jetzt mit den Grundlagen des CTA begonnen Diashow erstellen oder sie mit einigen Anpassungen an den Keyframes sogar in ein Karussell umwandeln.

Rendering:

Wenn Sie also eine Homepage-Diashow benötigen, um den Mächtigen zu gefallen, sollten Sie jQuery wie z. B. aufgeben über. Wenn Sie Feedback oder Fragen haben, teilen Sie uns dies bitte über die Schaltfläche unten mit.

6. In Karussell-Umschalteffekt konvertieren

Rendering (statisch, Sie können es selbst kompilieren und ausführen, um den Effekt zu sehen):

Angehängter CSS+JS-Code (HTML-Code wie oben):

CSS-Code:

#stage {
    margin: 1em auto;
    width: 640px;
    height: 400px;
    border: 10px solid #000;
    overflow: hidden;
  }
  #stage a {
    position: relative;
    display: inline-block;
  }
 #stage a::after {
    position: absolute;
    left: 11px;
    bottom: 11px;
    padding: 2px 0;
    width: calc(100% - 22px);
    background: rgba(0,0,0,0.5);
    text-align: center;
    content: attr(title);
    font-size: 1.1em;
    color: #fff;
  }

  #stage a:nth-of-type(2) {
    left: 640px;
    top: -50%;
    animation-name: slider;
    animation-delay: 4s;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0,1.5,0.5,1);
  }
  #stage a:nth-of-type(n+3) {
    display: none;
  }

  @keyframes slider {
    from { transform: translateY(-50%) rotate(30deg); left: 360px; }
    to   { transform: translateY(-50%); left: 0px; }
  }

JS-Code:

window.addEventListener("DOMContentLoaded", function(e) {

    var stage = document.getElementById("stage");
    var slideComplete = function(e) { stage.appendChild(arr[0]); };
    var arr = stage.getElementsByTagName("a");
    for(var i=0; i < arr.length; i++) {
      arr[i].addEventListener("animationend", slideComplete, false);
    }

  }, false);

Du bist fertig, Sie können es selbst machen. Kompilieren Sie es selbst und sehen Sie die Wirkung!

Zusammenfassung: Das Obige ist der gesamte in diesem Artikel vorgestellte Inhalt. Ich hoffe, dass er für das Studium aller hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonWie füge ich mit CSS+JS Text zu Folien hinzu? Rotationsumschaltung von Folien implementieren (Code beigefügt). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!