Bambam1990
Neues Mitglied
Hallo zusammen,
ich bin gerade dabei eine Slideshow zu erstellen. Nun habe ich folgendes Problem, ich weiß nicht, wie ich die Show einfach so ablaufen lassen kann, dass sich die Bilder einfach immer wieder von selbst wiederholen.
Mein Code sieht im Moment wie folgt aus:
<script type="text/javascript">//<![CDATA[
function fade(step) {
var imgs = document.getElementById("Fader").getElementsByTagName("img");
step = step || 1;
imgs[counter].style.opacity = step/100;
imgs[counter].style.filter = "alpha(opacity=" + step + ")"; // IE
step = step + 2;
if (step <= 100) {
window.setTimeout(function () { fade(step); }, 1);
} else {
window.setTimeout(next, 2000);
}
}
function next() {
var imgs = document.getElementById("Fader").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); }
#Fader { position: relative; }
</style>
</head><body>
<p id="Fader">
<img src="Bild1.jpeg" alt="Bild1">
<img src="Bild2.jpeg" alt="Bild2" class="next">
<img src="Bild3.jpeg" alt="Bild3" class="next">
<img src="Bild4.jpeg" alt="Bild4" class="next">
</p>
<p><a href="javascript:next()">starten</a></p>
</body></html>
ich bin gerade dabei eine Slideshow zu erstellen. Nun habe ich folgendes Problem, ich weiß nicht, wie ich die Show einfach so ablaufen lassen kann, dass sich die Bilder einfach immer wieder von selbst wiederholen.
Mein Code sieht im Moment wie folgt aus:
<script type="text/javascript">//<![CDATA[
function fade(step) {
var imgs = document.getElementById("Fader").getElementsByTagName("img");
step = step || 1;
imgs[counter].style.opacity = step/100;
imgs[counter].style.filter = "alpha(opacity=" + step + ")"; // IE
step = step + 2;
if (step <= 100) {
window.setTimeout(function () { fade(step); }, 1);
} else {
window.setTimeout(next, 2000);
}
}
function next() {
var imgs = document.getElementById("Fader").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); }
#Fader { position: relative; }
</style>
</head><body>
<p id="Fader">
<img src="Bild1.jpeg" alt="Bild1">
<img src="Bild2.jpeg" alt="Bild2" class="next">
<img src="Bild3.jpeg" alt="Bild3" class="next">
<img src="Bild4.jpeg" alt="Bild4" class="next">
</p>
<p><a href="javascript:next()">starten</a></p>
</body></html>
