So erzielen Sie mit Javascript einen Bildrotationseffekt

Mit der Entwicklung des Internets ist die Bildrotation zu einem unverzichtbaren Bestandteil des Webdesigns geworden. JavaScript ist eines der wichtigsten Werkzeuge bei der Umsetzung der Bilddrehung. In diesem Artikel wird erläutert, wie Sie mithilfe von Javascript einen einfachen, aber leistungsstarken Bildrad-Anzeigeeffekt implementieren.

1. Implementierungsprinzip

Das Grundprinzip der Bildradanzeige besteht darin, die angezeigten Bilder kontinuierlich zu wechseln und so den Benutzern unterschiedliche visuelle Erlebnisse zu bieten. Wenn wir JavaScript zum Implementieren der Bildrotation verwenden, können wir dies durch die folgenden Schritte tun:

1 Speichern Sie die Bilder, die gedreht werden müssen, in einem Array.

2. Holen Sie sich den Bildcontainer und die Steuerschaltfläche über DOM.

3. Stellen Sie den Timer ein, schalten Sie die angezeigten Bilder kontinuierlich um und ändern Sie den Status der Steuertasten.

2. Code-Implementierung

Bevor wir mit dem Schreiben von Code beginnen, werfen wir einen Blick auf die HTML-Struktur:

<img src="img/1.jpg" alt="img1"/>
<img src="img/2.jpg" alt="img2"/>
<img src="img/3.jpg" alt="img3"/>

<button class="btn active"></button>
<button class="btn"></button>
<button class="btn"></button>

# 🎜 🎜#

Wir verwenden einen Div-Container, um die Bilder zu laden, die gedreht werden müssen, und verwenden einen anderen Div-Container, um die Schaltfläche zur Rotationssteuerung zu platzieren.

Als nächstes werden wir Javascript verwenden, um Radanzeigeeffekte zu implementieren. Der spezifische Code lautet wie folgt:

var images = document.querySelectorAll('.img-container img'),

buttons = document.querySelectorAll('.btn'),
currentIndex = 0;

//Bilder wechseln

function switchImages (index) {

for (var i = 0; i < images.length; i++) {
    images[i].style.display = 'none';
    buttons[i].className = 'btn';
}
images[index].style.display = 'block';
buttons[index].className = 'btn active';

}

//Timer

setInterval(function() {

currentIndex = (currentIndex + 1) % images.length;
switchImages(currentIndex);

}, 3000);# 🎜🎜 #

Im obigen Code erhalten wir die Bilder und Karussellschaltflächen, die statisch angezeigt werden müssen, über querySelectorAll und definieren eine Variable currentIndex, um die Seriennummer des Bildes aufzuzeichnen, das aktuell angezeigt werden soll. In der Funktion switchImages zum Umschalten von Bildern setzen wir zunächst den Status aller Bilder und Schaltflächen auf „keine“ und den normalen Status und zeigen dann die anzuzeigenden Bilder erneut an und ändern den Status der entsprechenden Schaltflächen gemäß dem übergebenen Parameterindex. Stellen Sie abschließend die Funktion in setInterval so ein, dass der Bildwechsel alle 3 Sekunden ausgeführt wird, und erhöhen Sie den Wert von currentIndex jedes Mal um 1, um Endlosschleifen zu vermeiden.

3. Optimierung und Ergänzung

Der obige Code kann bereits die Grundfunktion der Bilddrehung realisieren, wir können sie aber auch optimieren und ergänzen. Beispielsweise kann das Hinzufügen von Funktionen wie Übergangseffekten oder Miniaturbildvorschauen die Darstellung des Rads lebendiger, schöner und praktischer machen.

1. Übergangseffekte hinzufügen

Wir können Übergangseffekte zu Bildern über das Übergangsattribut von CSS3 hinzufügen. Der Code lautet wie folgt:

. img-container img {

position: absolute;
top: 0;
left: 0;
transition: all ease-in-out .5s;

}

.img-container img.hide {

opacity: 0;
z-index: 1;

}

Im obigen Code Wir legen den Bildstil fest. Er ist absolut positioniert und verwendet das Übergangsattribut, um den Zeitpunkt und die Wirkung der Übergangsanimation anzugeben. Anschließend ändern wir den Klassennamen des zuvor ausgeblendeten Bildes in der Funktion „switchImages“ in „verstecken“, um den CSS3-Übergangseffekt auszulösen. Beachten Sie, dass wir die Ausführung des Codes, der den Stil ändert, verzögern müssen, da sonst der CSS3-Effekt nicht wirksam wird.

//Bilder wechseln

Funktion switchImages(index) {

for (var i = 0; i < images.length; i++) {
    images[i].className = '';
    buttons[i].className = 'btn';
}
images[currentIndex].className = 'hide';
setTimeout(function() {
    images[index].className = 'show';
}, 100);
currentIndex = index;
buttons[currentIndex].className = 'btn active';

}

2. Miniaturansicht hinzufügen

🎜🎜#Wir können auch Miniaturvorschauen auf der Steuertaste für die Radanzeige hinzufügen, um Benutzern das Anzeigen der Bilder zu erleichtern, die sie anzeigen möchten. Der spezifische Code lautet wie folgt:

//Miniaturansicht-Vorschau erstellen

for (var i = 0; i < Buttons.length; i++) {

buttons[i].style.backgroundImage = "url(" + images[i].src + ")";

}# 🎜🎜#//Mausbewegungsereignis
for (var j = 0; j < Buttons.length; j++) {

buttons[j].onmouseover = function(e) {
    var index = e.target.getAttribute('index');
    switchImages(index);
}

}

In Im obigen Code verwenden wir JavaScript, um das Hintergrundbild für jede Karussellschaltfläche festzulegen, und verwenden das Mausbewegungsereignis, um die Funktion zum Wechseln der Bilder auszulösen. Durch diese Funktion können Benutzer die Miniaturansichten der Bilder, die auf dem Karussell-Bedienfeld angezeigt werden sollen, direkt anzeigen, was das Benutzererlebnis verbessert.

4. Zusammenfassung

Durch die Verwendung von Javascript zur Erzielung von Bildrotationseffekten können wir nicht nur die Schönheit und Praktikabilität von Webseiten verbessern, sondern auch ein tiefgreifendes Verständnis dafür erlangen Anwendung von Javascript in der Webentwicklung. Versuchen Sie, den in diesem Artikel beschriebenen Code zu verwenden, um Ihren eigenen Webseiten einen Bildrad-Anzeigeeffekt hinzuzufügen und den Benutzern ein besseres Erlebnis zu bieten.

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit Javascript einen Bildrotationseffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!