Noch nicht viel geschrieben
Hallo liebe Community!
Ich brauche mal wieder eure Hilfe, und zwar möchte ich eine kleine Slideshow mit JavaScript programmieren. Diese soll jediglich drei Bilder zeigen und diese alle paar Sekunden mit einen schönen Übergangseffekt wechseln.
Ich wollte den einen Übergangseffekt von script.aculo.us verwenden und habe es geschafft per Link einzeln die Bilder überzublenden, aber mir ist es nicht gelungen, dass zu automatisieren. Sobald ich im JavaScript Bereich ein zweiten Mal den "newEffect.Fade" aufrufe funktioniert mein erster Bildwechsel nicht mehr.
Vielleicht kann mir jemand helfen oder eine Alternative nennen.
Lg
Adrian
Ich brauche mal wieder eure Hilfe, und zwar möchte ich eine kleine Slideshow mit JavaScript programmieren. Diese soll jediglich drei Bilder zeigen und diese alle paar Sekunden mit einen schönen Übergangseffekt wechseln.
Ich wollte den einen Übergangseffekt von script.aculo.us verwenden und habe es geschafft per Link einzeln die Bilder überzublenden, aber mir ist es nicht gelungen, dass zu automatisieren. Sobald ich im JavaScript Bereich ein zweiten Mal den "newEffect.Fade" aufrufe funktioniert mein erster Bildwechsel nicht mehr.
Vielleicht kann mir jemand helfen oder eine Alternative nennen.
Lg
Adrian
Code:
<html>
<head>
<script src="javascripts/prototype.js" type="text/javascript"></script>
<script src="javascripts/scriptaculous.js" type="text/javascript"></script>
<title>Test</title>
<script type="text/javascript" language="JavaScript">
<!--
bild01 = new Image();
bild01.src = "ajax1.jpg";
//----------------------------------------------------------------------
bild02 = new Image();
bild02.src = "ajax2.jpg";
//----------------------------------------------------------------------
bild03 = new Image();
bild03.src = "ajax3.jpg";
//----------------------------------------------------------------------
function Tauschen(Eingang,Ausgang) {
document.images[Eingang].src = eval(Ausgang + ".src");
}
function animation1(){
window.setTimeout('new Effect.Fade(\'slide\',{duration: 3});',4000);
window.setTimeout('Tauschen(\'slide\',\'bild02\')',7000);
window.setTimeout('Effect.Appear(\'slide\', {duration: 4})',7050);
// window.setTimeout('new Effect.Fade(\'slide\',{duration: 3});',11000)
// window.setTimeout('Tauschen(\'slide\',\'bild03\');',14000)
// window.setTimeout('Effect.Appear(\'slide\', {duration: 4});',14050)
// window.setTimeout('new Effect.Fade(\'slide\',{duration: 3});',18000);
// window.setTimeout('Tauschen(\'slide\',\'bild01\')',18000);
// window.setTimeout('Effect.Appear(\'slide\', {duration: 4})',18050);
}
//-->
</script>
</head>
<body onload="animation1();">
<img class="panorama" alt="gallerie" src="ajax1.jpg" name="slide" id="slide">
<a href="#" onclick="new Effect.Fade('slide',{duration: 3}); window.setTimeout('Tauschen(\'slide\',\'bild02\')',3000); window.setTimeout('Effect.Appear(\'slide\', {duration: 4})',3050); ">1</a>
<a href="#" onclick="new Effect.Fade('slide',{duration: 3}); window.setTimeout('Tauschen(\'slide\',\'bild03\')',3000); window.setTimeout('Effect.Appear(\'slide\', {duration: 4})',3050); ">2</a>
<a href="#" onclick="new Effect.Fade('slide',{duration: 3}); window.setTimeout('Tauschen(\'slide\',\'bild01\')',3000); window.setTimeout('Effect.Appear(\'slide\', {duration: 4})',3050); ">3</a>
</body>
</html>
