JavaScript/Tutorials/Bildwechsler

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

In diesem Tutorial lernen Sie, wie Sie einen Bildwechsler mit JavaScript animieren und mit einer komfortablen Steuerung versehen können. Dabei wird die moderne Web Animations API verwendet, mit der Sie CSS-Animationen durch JavaScript steuern können.

Inhaltsverzeichnis

[Bearbeiten] Vorüberlegungen

[Bearbeiten] Voraussetzungen

Dieses Tutorial richtet sich vor allem an Anfänger, die bereits erste Erfahrungen mit JavaScript-Elementen wie Schleifen oder Verzweigungen haben und nun tiefer in eine objektorientierte Programmierung in JavaScript einsteigen möchten.

Daher werden in diesem Artikel grundlegende Kenntnisse um die Sprachelemente von JavaScript sowie HTML und CSS vorausgesetzt und nicht näher besprochen. Es seien an dieser Stelle aber folgende Kapitel der Dokumentation zum Nachschlagen empfohlen:

[Bearbeiten] Geschichte

Dieser Artikel ist die umfassende Neubearbeitung eines Selfhtml-aktuell-Artikels von Felix Riesterer aus dem Jahre 2008 mit dem Thema Fader-Framework - Kleiner Lehrgang zum vernünftigen Schreiben eines JavaScripts.

Die seinerzeit neue CSS3-Eigenschaft opacity bedarf heute weder einer weiteren Erklärung noch eines Fallbacks mit der proprietären MS-filter-Eigenschaft.

Damals wurden JavaScript-Funktionen mit Event-Attributen im HTML-Code aufgerufen. Die im Originalartikel vorgestellte Kapselung von Funktionen mittels window.onload ist heute durch addEventlistener nicht mehr nötig. Die dort ausführlich erklärte Trennung von Inhalt, Präsentation und Verhalten mit der Auslagerung von externen JavaScripten ist heute ein Standard, dessen Nutzen den meisten Webdesignern nicht mehr vorgestellt werden muss. Darüber hinaus hat sich gerade im Bereich der Animation und der Ereignisüberwachung viel verändert.

[Bearbeiten] Inhalt des Lehrgangs

[Bearbeiten] Zielvorstellungen

Ziel dieses Artikels ist ein JavaScript, das aus einer externen Datei in ein Dokument eingebunden werden kann, sich dort selbst initialisiert und vorhandene Bilder in eine Art Bilder-Slideshow umwandeln kann. Dabei soll dieser Bildwechsler sowohl mit Maus als auch Tastatur steuerbar sein.

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML