Wie man drehende Bilder auf meiner Web-Seite, und legen Sie sie an einer beliebigen Stelle auf der Seite

Bilder, die sich automatisch ändern sind grundsätzlich interessant zu beobachten, das macht sie ideal für die Aufbewahrung der Zuschauer auf Ihrer Website. Bild Radfahren erfordert nur wenige Zeilen JavaScript. Ein möglicher Ansatz stützt sich auf die SetInterval-Anweisung, die Funktion ausgeführt wird, die Sie in regelmäßigen Abständen zu wählen. Um Ihre Bilder einfach an der gewünschten Stelle auf Ihrer Web-Seite zu positionieren, geben Sie die Positionskoordinaten mit Top und Left Eigenschaften von CSS an.

Anweisungen

1 Öffnen Sie den Editor, und fügen Sie die folgenden HTML-Anweisungen in dem Dokument. Diese Aussagen definieren eine grundlegende, leere Webseite, in dem Sie Anweisungen zum Anzeigen von zyklischer Bildern einfügen können:

< HTML >< HEAD >< / HEAD >< BODY >< / BODY >< / HTML >

2 Fügen Sie die folgenden Anweisungen nach < BODY > HTML-Tag. Dieses Tag definiert einen Platzhalter für eine Bilddatei namens "b1.jpg." Obwohl diese Aussage codiert ist, können JavaScript und CSS-Anweisungen Position und Inhalt des Platzhalters ändern:

< Img Id = "SomeImage" src="b1.jpg" >

3 Fügen Sie die folgenden JavaScript-Anweisungen direkt über dem Tag < Img >. Die Anweisungen vor die ChangeImage-Funktion erstellen Image-Variablen für diese Funktion, und verwenden Sie dann die Funktion in regelmäßigen Abständen aufrufen SetInterval. Die ChangeImage-Funktion verwendet die document.getElementById-Anweisung, um Bilder aus dem Array MyImages geladen in dem < Img >-Tag einfügen:

< Skript-Typ = "Text/Javascript" Language = "Javascript" >Var IdxImage = 0;Var MyImages geladen = new Array ("b1.jpg", "b2.jpg", "b3.jpg", "b4.jpg");Var ich = SetInterval (ChangeImage, 2500);

Funktion changeImage(){IdxImage ++;Wenn (IdxImage == myImages.length)IdxImage = 0;Document.getElementById('someImage').src = MyImages geladen [IdxImage];

}< / script >

4 Fügen Sie die folgenden CSS-Anweisungen unmittelbar unter dem < HEAD >-Tag. Diese Aussagen zeigen die Position der Seite < Img >-Tag, in Einheiten von Pixeln. Dieser Speicherort kann überall sein, dass Sie angeben. Geben Sie über die 230 und 200 Werte, die hier gezeigte mit unterschiedlichen Werten--etwa von Null bis 800 für die Top-Eigenschaft sowie 0 bis 1000 für die Left-Eigenschaft. Die Displayauflösung des PC oder ein anderes Gerät, das Ihre Webseite zeigt legt den tatsächlichen Bereich und daher variieren. Jedoch werden alle Geräte der Bilder in der oberen linken Ecke angezeigt wenn Sie "0" eingeben für oberen und linken Eigenschaften:

< Stil >

someImage {Lage: festgesetzt;oben: 230px;Links: 200px;}< / style >

5 Speichern Sie die Datei mit der Endung ".htm", und kopieren Sie dann die vier Bilder nacheinander von "b1.jpg" durch "b4.jpg" in denselben Ordner durchnummeriert.

6 Öffnen Sie die Webseite in Ihrem Webbrowser die ständig wechselnde Bilder anzeigen.

Tipps & Warnungen

• Denken Sie immer daran, Bilder suchen, die frei verwendet werden, sind oder werden, was unter der Creative Commons License aufgerufen wird. Andernfalls könnten Sie jemandes "intellectual Property Rights." verletzt werden Obwohl es häufig getan - Menschen anderer Leute Bilder ständig stehlen - ist es tatsächlich ein Verbrechen, nicht zu vergessen eine miese Sache zu tun. Es gibt mehr als genug Material draußen gegebene Weg kostenlos.
• Informationen in diesem Artikel beziehen sich auf HTML 5. Mit anderen Versionen kann es leicht oder deutlich variieren.