Hallo zusammen, ich habe folgendes Problem. Ich möchte, dass eine Slideshow automatisch beim Laden der Seite gestartet wird und nicht wie bisher auf klickbasis. Außerdem soll die Slideshow beim Erreichen des letzten Bildes, wieder beim ersten Bild anfangen.
Hier mein bisheriger Code:
Für Hilfe und Anregungen bin ich sehr dankbar.
Hier mein bisheriger Code:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src="script.js"></script>
<style type="text/css"></style>
</head>
<body>
<div id="header">
<p><img src="screenshots/Logo.jpg" width="100%" height="383" border="4" alt="Logo"</p>
<div class="clear"></div>
</div>
<div id="navi">
</div>
<div id="slideshow">
<h1>Slideshow</h1>
<p id="meinFader">
<img src="screenshots/holzbrett.jpg" alt="">
<img src="screenshots/holzbrett1.jpg" alt="" class="next">
<img src="screenshots/holzbrett2.jpg" alt="" class="next">
</p>
<p><a href="#" onclick="window.meinFader = new Fader('meinFader'); meinFader.next();
this.onclick = function () { return false; }; return false;">Slideshow starten</a></p>
</div>
</body>
</html>
script.js :
function Fader(id) {
this.id = id;
this.images = document.getElementById(id).getElementsByTagName("img");
this.counter = 0;
this.fade = function (step) {
var fader = this;
step = step || 0;
this.images[this.counter].style.opacity = step/100;
this.images[this.counter].style.filter = "alpha(opacity=" + step + ")"; // IE?
step = step + 2;
if (step <= 100) {
window.setTimeout(function () { fader.fade(step); }, 1);
} else {
window.setTimeout(function () { fader.next(); }, 2000);
}
};
this.next = function () {
this.counter++;
if (this.counter < this.images.length) {
this.fade();
}
};
}
Zuletzt bearbeitet von einem Moderator:
