Jan: Bilderwechsel in Endloschleife

Moinser,

ich könnte da mal Hilfe bei "javascript" gebrauchen (womit ich mich garnicht auskenne). Ich würde gerne zwei Bilder abwechselnd auf gleicher Position darstellen. Ich habe einen Code gefunden, der annähernd das umsetzt, was ich gerne haben möchte, allerdings sind da noch zwei Punkte die ich anders hätte:

1.)
Der Wechsel der Bilder wird zur Zeit nur mit einem Link gestartet.
Ich hätte es aber gerne so, dass es von selbst anfängt zu wechseln, sobald die Seite aufgerufen wird.
2.)
Es wird nur einmal gewechselt. Es sollte aber möglichst in endlosschleife laufen - also ein ständiger Wechsel von Bild1 auf Bild2 und dann das ganze von forne.

Zudem habe ich das Gefühl, das der Code so, wie er jetzt ist recht lang ist in BEzug auf das, was ich eigentlich haben möchte. Da wird glaube ich wesentlich mehr genacht, als ich überhaupt benötige.

Folgend mal der Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Eine Bilderslideshow</title>
<script type="text/javascript">
function fade(step)
{
         var imgs = document.getElementById("meinFader").getElementsByTagName("img");
         step = step || 0;
         imgs[counter].style.opacity = step/100;
         imgs[counter].style.filter = "alpha(opacity=" + step + ")";
         step = step + 2;
         if (step <= 100)
{
            window.setTimeout(function () { fade(step); }, 1);
            }
else
    {
            window.setTimeout(next, 2000);
            }
         }
function next()
{
         var imgs = document.getElementById("meinFader").getElementsByTagName("img");
if (typeof(counter) != "number")
{
          counter = 0;
            }
         counter++;
         if (counter < imgs.length)
{
            fade();
            }
        };
</script>

<style type="text/css">
.next { position: absolute; top: 0; left: 0; opacity: 0; filter:alpha(opacity=0); }
        #meinFader { position: relative; }
</style>

</head><body>
    <h1>Eine Bilderslideshow</h1>
    <p id="meinFader">
        <img src="bild2.gif">
        <img src="bild1.gif" class="next">
    </p>
    <p><a href="javascript:next()">Slideshow starten</a></p>
</body></html>

Würde mich freuen, wenn mir da jemand helfen kann.

Besten Gruß

Jan

  1. @@Jan:

    nuqneH

    ich könnte da mal Hilfe bei "javascript" gebrauchen (womit ich mich garnicht auskenne).

    Da hilft das Lesen des Artikels, aus dem du den Code hast. Der heißt nicht umsonst „kleiner Lehrgang“. Und natürlich des Kapitels http://de.selfhtml.org/javascript/index.htm @title=JavaScript in SELFHTML.

    Der Wechsel der Bilder wird zur Zeit nur mit einem Link gestartet.
    Ich hätte es aber gerne so, dass es von selbst anfängt zu wechseln, sobald die Seite aufgerufen wird.

    Nein. „[S]obald die Seite aufgerufen wird“ ist noch nichts da, was gewechselt werden könnte. Erst, wenn das http://de.selfhtml.org/javascript/sprache/eventhandler.htm@title=Ereignis „geladen“ eintritt.

    Es wird nur einmal gewechselt. Es sollte aber möglichst in endlosschleife laufen - also ein ständiger Wechsel von Bild1 auf Bild2 und dann das ganze von forne.

    Da hilft das Lesen des Artikels, aus dem du den Code hast ...

    Qapla'

    --
    Bildung lässt sich nicht downloaden. (Günther Jauch)