Animation/ Effekt zum Wechsel der Bilder hinzufügen

[arraybreak]

Abend All,

ich habe hier ein Script der meine Bilder automatisch wechselt, ich möchte für den Übergang eine Animation hinzufügen, weil derzeit er den Übergang nicht animiert, ich habe bereits einen jQuery Animation gefunden: Link , ich möchte gerne den CurtainX Effekt einbauen aber leider klappt es nicht, kann vielleicht jemand Helfen oder einen Tipp geben wie ich das umsetzen kann?

Kurz zum Code, er regelt die 6 Bilder die sich immer durch ein zweites nach einer bestimmten Zeit ersetzen.

Hier der Code

<script language="javascript" type="text/javascript">
var typ = 0;
var bild = 0;
 
window.setTimeout("start()", 5000);
 
function start() {
    change = window.setInterval("bildwechsel()", 1000);
}
 
function bildwechsel () {

bilder = new Array("images/7.jpg", "images/8.jpg", "images/9.jpg", "images/10.jpg", "images/11.jpg", "images/12.jpg", "images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg", "images/5.jpg", "images/6.jpg");

if (typ == 0) {
    document.getElementById("bild" + (bild+1)).src = bilder[bild];
} else {
    document.getElementById("bild" + (bild+1)).src = bilder[(bild + 6)];
}
 
if (bild < 5) {
    bild++;
} else {
    bild = 0;
    if (typ == 0) {
        typ = 1;
    } else if (typ == 1) {
        typ = 0;
    }
    window.clearInterval(change);
    window.setTimeout("start()", 5000);
}
 
}
</script>
<img src="images/1.jpg" width="120px" height="120px" style="border: 0px;" id="bild1"/>
<img src="images/1.jpg" width="120px" height="120px" style="border: 0px;" id="bild2"/>
<img src="images/1.jpg" width="120px" height="120px" style="border: 0px;" id="bild3"/>
<img src="images/1.jpg" width="120px" height="120px" style="border: 0px;" id="bild4"/>
<img src="images/1.jpg" width="120px" height="120px" style="border: 0px;" id="bild5"/>
<img src="images/1.jpg" width="120px" height="120px" style="border: 0px;" id="bild6"/>

Wäre euch sehrrrrr Dankbar

Gruß arraybreak

 

[para_noid]

"Klappt nicht" glaub ich dir gerne, bei dem Code.

Du willst diesen Effekt nutzen, hast aber nirgendwo eine entsprechende Funktionalität stehen?

$('#up').cycle({
    fx:    'curtainX',
    sync:  false,
    delay: -2000
 });

ist das aus der Demo.

Sind die erforderlichen jQuery-Dateien überhaupt eingebunden?

Wenn ja, pack die sechs Bilder in einen Div-Container mit einer ID, das ganze Javascriptgedöhns schmeißt du raus und stattdessen fügst du

$(document).ready(function() {
  $('#IDdesDIVs').cycle({
    fx:    'curtainX',
    sync:  false,
    delay: -2000
 });
});

ein.


Und hier kannste auch nochmal drüberlesen.