So drehen Sie Bilder in Javascript

JavaScript ist eine beliebte Programmiersprache, die Inhalte auf Webseiten dynamisch anzeigen kann. Im Webdesign ist die Bilddrehung ein wichtiger Bestandteil zur Steigerung der Interaktivität und Attraktivität einer Seite. Im Folgenden wird erläutert, wie Sie mithilfe von JavaScript den Bildrotationseffekt erzielen.

1. Vorbereitung von HTML und CSS

In der HTML-Datei müssen wir zunächst einen Bildcontainer definieren und die ul- und li-Tag-Strukturen verwenden, um Code zu schreiben. Das ul-Tag repräsentiert den Bildcontainer und das li-Tag repräsentiert das Bild. Wie unten gezeigt:

<div id="slider">
  <ul>
    <li><img src="path/to/image1.jpg"></li>
    <li><img src="path/to/image2.jpg"></li>
    <li><img src="path/to/image3.jpg"></li>
  </ul>
</div>

In der CSS-Datei müssen wir den Stil des Bildcontainers und des Bildes festlegen, einschließlich Breite, Höhe, Position und anderer Attribute, und das Attribut overflow:hidden verwenden, um den Inhalt außerhalb des Containers auszublenden Zeigt nur den Teil innerhalb des angegebenen Bereichs an. Wie unten gezeigt:

#slider {
   width: 600px;
   height: 400px;
   position: relative;
   overflow: hidden;
 }
 
 #slider ul {
   position: absolute;
   list-style: none;
   margin: 0;
   padding: 0;
   width: 300%;
 }
 
 #slider ul li {
   float: left;
   width: 33.33%;
   height: 400px;
 }

 #slider ul li img {
   width: 100%;
   height: 100%;
   display: block;
 }

2. Implementierung von JavaScript

In JavaScript müssen wir den Bildcontainer bedienen, um den Bildrotationseffekt zu erzielen. Wir können einen Timer definieren, um das Bild im Laufe der Zeit zu animieren. Der Code lautet wie folgt:

var slider = document.getElementById("slider");
var ul = slider.children[0];
var liWidth = slider.offsetWidth / 3;
var currentIndex = 0;
var timer;

function autoPlay() {
  timer = setInterval(function() {
    currentIndex++;
    if (currentIndex >= 3) {
      currentIndex = 0;
    }
    ul.style.left = -currentIndex * liWidth + "px";
  }, 3000);
}
autoPlay();

Im Code erhalten wir zunächst den Container-Slider, der das Bild und das ul-Element innerhalb des Containers enthält. Wir können die Breite jedes Bildes berechnen, indem wir die Containerbreite durch die Anzahl der Li dividieren. Als nächstes definieren Sie eine Variable currentIndex, die den aktuellen Bildindex enthält, um den Rotationsstatus zu verfolgen. Schließlich verwenden wir die Funktion setInterval, um einen Timer zu definieren, der alle 3 Sekunden läuft, um den Wert currentIndex und den linken Rand von ul zu ändern, um das Bild automatisch zu drehen. Verwenden Sie außerdem die Funktion „clearInterval“, um den Timer zu stoppen, wenn Sie die Rotation stoppen müssen.

3. Einen Bildindikator hinzufügen

Wenn Sie dem Bildrotationseffekt einen Indikator hinzufügen möchten, können Sie dem HTML-Code einen Indikatorcontainer hinzufügen und den Indikator mithilfe von JavaScript dynamisch erstellen. Der Code lautet wie folgt:

<div id="slider">
  <ul>
    <li><img src="path/to/image1.jpg"></li>
    <li><img src="path/to/image2.jpg"></li>
    <li><img src="path/to/image3.jpg"></li>
  </ul>
  <div id="indicator"></div>
</div>

var indicator = document.getElementById("indicator");

for (var i = 0; i < 3; i++) {
  var div = document.createElement("div");
  div.className = "dot";
  div.setAttribute("index", i);
  div.onclick = function() {
    currentIndex = parseInt(this.getAttribute("index"));
    ul.style.left = -currentIndex * liWidth + "px";
    setActive();
  };
  indicator.appendChild(div);
}

function setActive() {
  var dots = document.getElementsByClassName("dot");
  for (var i = 0; i < dots.length; i++) {
    if (currentIndex == i) {
      dots[i].className = "dot active";
    } else {
      dots[i].className = "dot";
    }
  }
}
setActive();

Wir erhalten zuerst den Indikator-Container-Indikator und verwenden dann Schleifenanweisungen, um dynamisch mehrere div-Elemente mit Indexattributen zu erstellen, um die Indikatorpunkte jedes Bildes darzustellen. Anschließend fügen wir für jeden Indikatorpunkt ein Onclick-Ereignis hinzu. Wenn auf den Indikatorpunkt geklickt wird, wird der aktuelle Bildindex currentIndex geändert, der linke Rand von ul auf links gesetzt und der Indikatorpunkt in den aktiven Zustand versetzt. In der setActive-Funktion durchlaufen wir alle Indikatorpunkte, fügen den Namen der aktiven Klasse zum aktuell ausgewählten Indikatorpunkt hinzu und vertiefen seine Hintergrundfarbe, um ihn von den nicht ausgewählten Indikatorpunkten zu unterscheiden.

4. Zusammenfassung

In diesem Artikel wird erläutert, wie Sie mithilfe von HTML, CSS und JavaScript Bildrotationseffekte erzielen und gleichzeitig Indikatoren hinzufügen, um die Benutzererfahrung zu verbessern. Wenn Sie daran interessiert sind, die JavaScript-Programmierung eingehend zu erlernen, wird empfohlen, weitere ähnliche Webanimationen, Interaktionsdesigns und Spezialeffekte zu üben, um Ihre Fähigkeiten und praktische Projektentwicklungserfahrung zu verbessern.

Das obige ist der detaillierte Inhalt vonSo drehen Sie Bilder in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!