Frage Bilder

[tigoutis]

Hallo,

ich suche eine Möglichkeit die Position der Bilder untereinander rotieren zu lassen, entweder bei jeder Aktualisierung oder nach einer gewissen Zeit:
<a href="link1.html"><li><img src="foto1.jpg" alt="Foto"><div class="over"></div></li>
<a href="link2.html"><li><img src="foto2.jpg" alt="Foto"><div class="over"></div></li>
<a href="link3.html"><li><img src="foto3.jpg" alt="Foto"><div class="over"></div></li>
<a href="link4.html"><li><img src="foto4.jpg" alt="Foto"><div class="over"></div></li>
<a href="link5.html"><li><img src="foto5.jpg" alt="Foto"><div class="over"></div></li>

Hättet ihr einen Lösungsansatz?

 

[bdt600]

Mit HTML wird das wohl nix werden, JavaScript oder PHP sind dein Freund

 

[Daniel_Pixelsafari.net]

Bei JS so, die Richtung in etwa. Mit jQuery geht's leichter.

Hab's aber nur kurz runtergeschrieben & nicht getestet:

var i=1;
function fotoLoop() {
    setTimeout(function () {
        document.getElementsByClassName('pics').style.display = 'none';
        document.getElementById("pic" + i).style.display = 'block';
        i++;
        if (i < 5) {
            fotoLoop();
        }
        else{
            i = 1;
        }
    }, 1000)
}

Und hier die HTML:

<a href="link1.html"><li><img src="foto1.jpg" alt="Foto" id="pic1" class="pics"><div class="over"></div></li>
<a href="link2.html"><li><img src="foto2.jpg" alt="Foto" id="pic2" class="pics"><div class="over"></div></li>
<a href="link3.html"><li><img src="foto3.jpg" alt="Foto" id="pic3" class="pics"><div class="over"></div></li>
<a href="link4.html"><li><img src="foto4.jpg" alt="Foto" id="pic4" class="pics"><div class="over"></div></li>
<a href="link5.html"><li><img src="foto5.jpg" alt="Foto" id="pic5" class="pics"><div class="over"></div></li>