Noch nicht viel geschrieben
Hallo Leute,
leider hab ich mein Thema nicht genau gefunden. Vielleicht kann mir hier jemand helfen. Ich möchte auf meiner website nichts weiter, als eine automatisch laufende Endlos-Slideshow.
Über selfhtml.org hab ich das script immerhin so erfolgreich auf meiner seite einbauen können, dass es generell läuft. Was ich nicht hinbekomme sind Autostart und Neuanfang nach Ende der Bildfolge.
Das Script lautet:
1. Im Head:
<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, 4000);
}
}
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); display:block;width:260px;height:421px; margin-right:0px; margin-left:0px; margin-bottom:0px; margin-top:0px;border-left-width:1px;border-top-width:0px;border-right-width:1px;border-bottom-width:0px;border-left-color:#FFF;border-top-color:#DDDDDD;border-right-color:#FFF;border-bottom-color:#DDDDDD;border-left-style:solid;border-top-style:solid;border-right-style:solid;border-bottom-style:solid }
#meinFader { position: relative; }
</style>
2. Im Body:
<div id="meinFader">
<img src="IMG_8931.jpg" alt="" class="img_v_index">
<img src="IMG_8908.jpg" alt="" class="next">
<img src="IMG_8789.jpg" alt="" class="next">
</div>
<p><a href="javascript:next()">Slideshow starten</a></p>
Wie kann ich den Startlink durch Autostart ersetzen und eine Endlosschleife erstellen?
Link zur website:
Hoffe, jemand kann helfen.
Gruß Tom
leider hab ich mein Thema nicht genau gefunden. Vielleicht kann mir hier jemand helfen. Ich möchte auf meiner website nichts weiter, als eine automatisch laufende Endlos-Slideshow.
Über selfhtml.org hab ich das script immerhin so erfolgreich auf meiner seite einbauen können, dass es generell läuft. Was ich nicht hinbekomme sind Autostart und Neuanfang nach Ende der Bildfolge.
Das Script lautet:
1. Im Head:
<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, 4000);
}
}
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); display:block;width:260px;height:421px; margin-right:0px; margin-left:0px; margin-bottom:0px; margin-top:0px;border-left-width:1px;border-top-width:0px;border-right-width:1px;border-bottom-width:0px;border-left-color:#FFF;border-top-color:#DDDDDD;border-right-color:#FFF;border-bottom-color:#DDDDDD;border-left-style:solid;border-top-style:solid;border-right-style:solid;border-bottom-style:solid }
#meinFader { position: relative; }
</style>
2. Im Body:
<div id="meinFader">
<img src="IMG_8931.jpg" alt="" class="img_v_index">
<img src="IMG_8908.jpg" alt="" class="next">
<img src="IMG_8789.jpg" alt="" class="next">
</div>
<p><a href="javascript:next()">Slideshow starten</a></p>
Wie kann ich den Startlink durch Autostart ersetzen und eine Endlosschleife erstellen?
Link zur website:
Hoffe, jemand kann helfen.
Gruß Tom