Slideshow
0 
henf
0 0 
JürgenB
0 
Felix Riesterer
0 danke
Slideshow
Hallo ich beschäftige mich grad mit php und will dort eine java script slideshow einblenden, von java script hab ich überhaupt keine ahnung darum würd ich mich über eine hilfreiche antwort sehr freuen.
http://aktuell.de.selfhtml.org/artikel/javascript/fader-framework/fader2.htm
Diese Slideshow funktioniert so auch bei mir.
Ich möchte aber dass sie von allein ohne klick auf "Slideshow starten" abläuft und sie in einer Endlosschleife läuft.
Kann mir den Quellcode jemand so ändern dass es funktioniert?
Würd mich sehr freuen.
lg
<!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="images/berge1.jpg" alt="">
<img src="images/berge2.jpg" alt="" class="next">
<img src="images/berge3.jpg" alt="" class="next">
<img src="images/berge4.jpg" alt="" class="next">
<img src="images/berge5.jpg" alt="" class="next">
<img src="images/berge6.jpg" alt="" class="next">
</p>
<p><a href="javascript:next()">Slideshow starten</a></p>
</body></html>
-
servus Mara,
Ich möchte aber dass sie von allein ohne klick auf "Slideshow starten" abläuft und sie in einer Endlosschleife läuft.
Kann mir den Quellcode jemand so ändern dass es funktioniert?
Würd mich sehr freuen.Hier der Codeteil, der die Slideshow startet:
<p><a href="javascript:next()">Slideshow starten</a></p>
next()ist die gesuchte Funktion. Nun soll die Slideshow nicht per Klick gestartet werden (man könnte statthref="javascript:next()" auch onclick="next()" schreiben), sondern wenn die Seite geladen ist. Onclick ist ein Eventhandler, der bei Klicks anspringt. Es gibt einen Eventhandler, der anspringt, sobald das Element geladen ist. Nennt sich onload. Da die Seite geladen sein soll, müssen alle Elemente vorhanden sein, die im Body stehen. Demzufolge muss das body-Element den Eventhandler onload bekommen und als Wert die Funktion next().Damit die Schleife endlos wird, schaue dir die Funktion next() an. Dort gibt es die Variable counter. counter steht für das Bild, das angesprochen wird. counter = 0 ist das erste Bild, 1 das zweite etc.
Die zweite if-Abfrage in der Funktion macht quasi das: Führe die Funktion fade() solange aus, wie der Wert von counter kleiner gleich der Anzahl der vorhandenen Bilder ist. Ist counter größer, sind die Bilder alle. Also muss sie wieder auf 0 gesetzt werden, damit es vorne los geht. Logisch oder?henf
--
Life is hard, right?
No, life is easy! YOU suck!-
function next() { var imgs = document.getElementById("meinFader").getElementsByTagName("img"); if (typeof(counter) != "number") { counter = 0; } counter++; if (counter < imgs.length) { fade(); } };ich hab dazu doch nochmal ne frage
also im moment läuft die slideshow so dass sie aufhört wenn die bilder alle durch sind, ich will aber eine enlosschleife
ich hab u.a. das probiert:~~~javascript function next() {
var imgs = document.getElementById("meinFader").getElementsByTagName("img");if (typeof(counter) != "number") {
counter = 0;
}counter++;
if (counter < imgs.length) {
fade();
}if (counter=imgs.length)
{
counter=0;
}};
geht aber nicht, was muss ich da noch ändern dass es eine endlosschleife wird?-
Hallo Mara,
if (counter=imgs.length)
du musst vergleichen (==) und nicht zuweisen (=).
Gruß, Jürgen
-
Hallo Mara,
if (counter=imgs.length)
du musst vergleichen (==) und nicht zuweisen (=).
Gruß, Jürgen
ok danke für den hinweis und was muss ich noch ändern? bis jetzt gehts noch nicht bei bild 1 wieder los
~~~javascript function next() {
var imgs = document.getElementById("meinFader").getElementsByTagName("img");if (typeof(counter) != "number") {
counter = 0;
}counter++;
if (counter < imgs.length) {
fade();
}if (counter==imgs.length)
{
counter=0;
}};
-
ok danke für den hinweis und was muss ich noch ändern? bis jetzt gehts noch nicht bei bild 1 wieder los
~~~javascript
function next() {
var imgs = document.getElementById("meinFader").getElementsByTagName("img");
if (typeof(counter) != "number") {
counter = 0;
}counter++;
if (counter < imgs.length) {
fade();
}if (counter==imgs.length)
{
counter=0;
}};
nach counter=0; musst du noch die fade-funktion aufrufen: if (counter==imgs.length) { ´ counter=0; fade(); }-
~~~javascript
function next() {
var imgs = document.getElementById("meinFader").getElementsByTagName("img");
if (typeof(counter) != "number") {
counter = 0;
}counter++;
if (counter < imgs.length) {
fade();
}if (counter==imgs.length)
{
counter=0;
}};
> > nach counter=0; musst du noch die fade-funktion aufrufen: > > if (counter==imgs.length) { > ´ counter=0; > fade(); > } das hat ich auch schon probiert, hört aber trotzdem beim letzten bild auf und fängt nicht beim ersten wieder an was muss man dann noch ändern? so sieht meine aktuelle funktion jetzt aus: ~~~javascript function next() { var imgs = document.getElementById("meinFader").getElementsByTagName("img"); if (typeof(counter) != "number") { counter = 0; } counter++; if (counter < imgs.length) { fade(); } if (counter==imgs.length) { counter=0; fade(); } };-
das hat ich auch schon probiert, hört aber trotzdem beim letzten bild auf und fängt nicht beim ersten wieder an
was muss man dann noch ändern? so sieht meine aktuelle funktion jetzt aus:function next() {
var imgs = document.getElementById("meinFader").getElementsByTagName("img");
if (typeof(counter) != "number") {
counter = 0;
}counter++;
if (counter < imgs.length) {
fade();
}if (counter==imgs.length)
{
counter=0;
fade();
}};
> Liegt wohl dadran: imgs[counter].style.opacity = step/100; imgs[counter].style.filter = "alpha(opacity=" + step + ")"; die bilder sind praktisch alle auf undurchsichtig gestellt, deshalb sieht man nur das letzte. Ich denke wenn man die wieder zurückstellt auf die urprungswerte(für alle bilder opacity: 0; filter:alpha(opacity=0); ) sollte es gehen(sorry hab noch nicht wirklich viel mit Javascript gemacht).-
<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(); } if (counter==imgs.length) { counter=0; 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 onLoad="javascript:next()"> <p id="meinFader"> <img src="images/1.jpg" width="368" height="250"alt=""> <img src="images/2.jpg" width="368" height="250" alt="" class="next"> <img src="images/3.jpg" width="368" height="250" alt="" class="next">wer weiß dann was hier geändert werden muss dass eine endlos wiedergabe erfolgt?
-
-
-
-
-
-
-
-
Liebe Mara,
Ich möchte aber dass sie von allein ohne klick auf "Slideshow starten" abläuft und sie in einer Endlosschleife läuft.
was hat Dich daran gehindert, meinen Artikel etwas weiter zu lesen? Dort hätte so manches gestanden, um Dir einerseits das Verständnis von JS etwas näher zu bringen, und andererseits, um Deine gewünschte Lösung umzusetzen.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:) -
vielen dank euch beiden, läuft jetzt