Abend All,

ich habe hier ein Script zusammengestellt der meine 6 Bilder (die in einer reihe sind) durch ein zweites wechselt:

HTML:

PHP-Code:

<div id="b1w">
<img src="images/1.jpg" width="120px" height="120px" style="border: 0px;"/>
<img src="images/7.jpg" width="120px" height="120px" style="border: 0px;" /></div>

<div id="b2w">
<img src="images/2.jpg" width="120px" height="120px" style="border: 0px;"/>
<img src="images/8.jpg" width="120px" height="120px" style="border: 0px;" /></div>


<div id="b3w">
<img src="images/3.jpg" width="120px" height="120px" style="border: 0px;"/>
<img src="images/9.jpg" width="120px" height="120px" style="border: 0px;" /></div>

<div id="b4w">
<img src="images/4.jpg" width="120px" height="120px" style="border: 0px;"/>
<img src="images/10.jpg" width="120px" height="120px" style="border: 0px;" /></div>

<div id="b5w">
<img src="images/5.jpg" width="120px" height="120px" style="border: 0px;"/>
<img src="images/11.jpg" width="120px" height="120px" style="border: 0px;" /></div>

<div id="b6w">
<img src="images/6.jpg" width="120px" height="120px" style="border: 0px;"/>
<img src="images/12.jpg" width="120px" height="120px" style="border: 0px;" /></div> 


Und der jQuery Code zur animation:

PHP-Code:

jQuery(document).ready(function() {
  jQuery("#b1w").cycle({
    fx:    'fade',
    sync:  false,
    timeout: 5000,
    delay: 5000

 });
});

jQuery(document).ready(function() {
  jQuery("#b2w").cycle({
    fx:    'fade',
    sync:  false,
    timeout: 5000,
    delay: 6000
 });
});

jQuery(document).ready(function() {
  jQuery("#b3w").cycle({
    fx:    'fade',
    sync:  false,
    timeout: 5000,
    delay: 7000
 });
});

jQuery(document).ready(function() {
  jQuery("#b4w").cycle({
    fx:    'fade',
    sync:  false,
    timeout: 5000,
    delay: 8000
 });
});

jQuery(document).ready(function() {
  jQuery("#b5w").cycle({
    fx:    'fade',
    sync:  false,
    timeout: 5000,
    delay: 9000
 });
});

jQuery(document).ready(function() {
  jQuery("#b6w").cycle({
    fx:    'fade',
    sync:  false,
    timeout: 5000,
    delay: 10000
 });
}); 


Mit Einstellungen "Timeout" und "Delay" wollte ich eigentlich diese Animation erreichen:
Wenn man die Seite betritt startet sich die animation erst in 5 sekunden -> EINS nach dem ANDEREN werden gewechselt --> Animation steht wieder 5 Sekunden .... und so immer wieder ...

Aber ich kriegs nicht hin, ich kriege die 5 Sekunden Pause nach letzten Bild nicht hin und nach einiger zeit wird die Animation asynchron. Was mache ich falsch?

Hier ist der Link zum jQuery Effekt: Cycle


arraybreak