Heim > Web-Frontend > js-Tutorial > Hauptteil

So verwenden Sie Javascript, um Bilder automatisch umzuwandeln

醉折花枝作酒筹
Freigeben: 2023-01-04 09:35:04
Original
7685 Leute haben es durchsucht

Methode: 1. Erstellen Sie ein Array von Bildpfaden. 2. Verwenden Sie timeInterval, um die Umschaltzeit zu definieren, und setInterval(), um die Zeit für die regelmäßige Ausführung der Funktion festzulegen. 3. Rufen Sie das img-Objekt ab, legen Sie den anfänglichen curIndex fest Vergleichen Sie die Bildnamen mit der if-Anweisung, um den Bildnamen kontinuierlich zu ändern, um Umschalteffekte zu erzielen.

So verwenden Sie Javascript, um Bilder automatisch umzuwandeln

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

So verwenden Sie JavaScript, um Bilder automatisch zu ändern

1. Erstellen Sie eine neue HTML-Datei und nennen Sie sie test.html, um zu erklären, wie Sie Javascript verwenden, um einen geplanten Bildwechsel zu erreichen.

So verwenden Sie Javascript, um Bilder automatisch umzuwandeln

2. Verwenden Sie in test.html das img-Tag, um eine Bildanzeige zu erstellen, und setzen Sie dessen ID-Attribut auf obj, damit das Elementobjekt unten abgerufen werden kann.

So verwenden Sie Javascript, um Bilder automatisch umzuwandeln

3. Verwenden Sie im Skript-Tag der test.html-Seite new Array(), um ein Array von Bildpfaden zu erstellen und die Dateinamen der drei Bilder darin einzufügen.

So verwenden Sie Javascript, um Bilder automatisch umzuwandeln

4. Verwenden Sie im Skript-Tag der test.html-Seite die Variable timeInterval, um die Bildwechselzeit auf 1 Sekunde zu definieren, und stellen Sie die Funktion changeImg() so ein, dass sie jede Sekunde über den setInterval()-Timer ausgeführt wird Verfahren.

So verwenden Sie Javascript, um Bilder automatisch umzuwandeln

5. Verwenden Sie in der Funktion changeImg() die Methode document.getElementById(), um das img-Objekt abzurufen, legen Sie eine anfängliche curIndex-Variable fest und vergleichen Sie die Namen der Bilder über die if-Anweisung, um den Namen kontinuierlich zu ändern des Bildes.

Hinweis: Der Name des Bildes muss 0, 1, 2 und andere geordnete Zahlen sein.

So verwenden Sie Javascript, um Bilder automatisch umzuwandeln

6. Verwenden Sie in der Funktion changeImg() den im vorherigen Schritt erhaltenen Bildnamen, um den Bildpfad von img zu ändern und schließlich einen regelmäßigen Bildwechsel zu erreichen.

So verwenden Sie Javascript, um Bilder automatisch umzuwandeln

Weitere Programmierkenntnisse finden Sie unter: Programmiervideo! !

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Javascript, um Bilder automatisch umzuwandeln. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage