Finde den Fehler im Code für wechselnde Bilder leider nicht, kann einer helfen ?

[SleepGirl]

Hallo alle zusammen,

ich bin derzeit dabei eine Internetseite zu machen, wo auf der ersten Seite wechselnde Bilder sein sollen.

Soweit habe ich auch ein Code, bei einer Übungsseite hat alles funktioniert, nur jetzt bei meiner Hauptseite will es irgendwie nicht :( entweder flackern die Bilder hoch und runter oder es bewegt sich nicht.

Ich brauche dringend Hilfe, ich finde dem Fehler einfach nicht, ich bedanke mich schon mal im Vorraus für Hilfe.

Hier ist auf jeden fall der Code:

<script type="text/javascript">
var Bild = null;
var aktuell = 0;
var PAUSE = 100;
var BLENDE = 1000;

$(document).ready(function() {
Bilder = $('#Bilder img');
Bilder.slice(1).hide();
});

$(window).load(function() {
var ueberblenden = function() {
$(bilder[aktuell]).fadeOut(BLENDE);
aktuell++ ;
if (aktuell >= bilder.length) {
aktuell = 0;
}
$(bilder[aktuell]).fadeIn(BLENDE,function() {
window.setTimeout(ueberblenden,PAUSE);
});
};
window.setTimeout(ueberblenden,PAUSE);
});
</script>

 

[scbawik]

Hallo alle zusammen,

ich bin derzeit dabei eine Internetseite zu machen, wo auf der ersten Seite wechselnde Bilder sein sollen.

Soweit habe ich auch ein Code, bei einer Übungsseite hat alles funktioniert, nur jetzt bei meiner Hauptseite will es irgendwie nicht :( entweder flackern die Bilder hoch und runter oder es bewegt sich nicht.

Ich brauche dringend Hilfe, ich finde dem Fehler einfach nicht, ich bedanke mich schon mal im Vorraus für Hilfe.

Hier ist auf jeden fall der Code:

<script type="text/javascript">
var Bild = null;
var aktuell = 0;
var PAUSE = 100;
var BLENDE = 1000;

$(document).ready(function() {
Bilder = $('#Bilder img');
Bilder.slice(1).hide();
});

$(window).load(function() {
var ueberblenden = function() {
$(bilder[aktuell]).fadeOut(BLENDE);
aktuell++ ;
if (aktuell >= bilder.length) {
aktuell = 0;
}
$(bilder[aktuell]).fadeIn(BLENDE,function() {
window.setTimeout(ueberblenden,PAUSE);
});
};
window.setTimeout(ueberblenden,PAUSE);
});
</script>

Ohne mir den Code genau angesehen zu haben, vermute ich eher das liegt am CSS als am JS.

 

[LeCub]

1.Du definierst "Bilder" und rufst "bilder" auf, das kann nicht klappen.
2. $(...) gibt ein Objekt zurück, weshalb "slice()" nicht funktioniert

 

[Tronjer]

- all Variablen klein schreiben und mit dem keyword var einleiten.
- Bilder !== bilder
- slicen ist unnötig.

 

[Tronjer]

Rekursive Funktion ohne setTimeout.

// HTML
<img id="my_img" alt="image">

// JS
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
  var slider = (function() {
    return {
      image: {
        img: ['animals-q-c-640-480-8.jpg', 'animals-q-c-640-480-9.jpg', 'animals-q-c-640-480-10.jpg'],
        count: 0,
        change: function() {
          $('#my_img')
            .fadeIn(2000).delay(2500).fadeOut(function() {
              slider.image.change();
            }).attr('src', 'http://lorempixel.com/image_output/' + this.img[this.count++]);

          if (this.count == this.img.length) {
            this.count = 0;
          }
        }
      }
    }
  })();

  $(document).ready(function() {
    $('#my_img').hide();
    slider.image.change();
  });