JavaScript/jQuery Image Slider Ausgabe

Fiddle: https://jsfiddle.net/8na2n5L2/JavaScript/jQuery Image Slider Ausgabe

Ich versuche, ein Bild Schieber zu schaffen, aber aus irgendeinem Grund kann meinen Kopf einfach nicht umschlingen, warum dies nicht funktioniert. Ich versuche im Grunde, einen Schieberegler zu erstellen, wo Bilder von rechts kommen (außerhalb des Bildschirms), und das Bild in der Mitte wird nach links verschoben (außerhalb des Bildschirms). Wenn es dann an der Zeit ist, dass das linke Bild wieder in die Mitte geht, geht es schnell wieder nach rechts, bevor es in die Mitte geht.

jQuery (document) .ready (function() {

var images = []; 

//store the images in an array 
jQuery('.main-image-slider').each(function() { 
    images.push(jQuery(this)); 
}); 

var i = 0; 
var max = images.length - 1; 

setInterval(function() { 
    if (i > max) { 
     i = 0; 
    } 

    images[i].removeClass('main-image-slider-left').addClass('main-image-slider-right').delay(100).queue(function() { 
     images[i].removeClass('main-image-slider-right').addClass('main-image-slider-center').dequeue(); 
     i++; 
    }); 


    if (images[i - 1]) { 
     images[i - 1].removeClass('main-image-slider-center').addClass('main-image-slider-left'); 
    } 


}, 3000);

});

Quelle

2016-06-13 Jordan Carter

Hey Jordan, wäre es toll, wenn Sie ein Schnipsel oder Demo das nächste Mal hinzufügen können! Wie auch immer, es ist ein kurzes Beispiel, also nehme ich an, dass der Fehler in Ihrem Zustand vor dem Inkrement passiert. 'if (images [i - 1])' - dies kann eine Referenz auf das -1st-Element der ersten Iteration sein, die, wie wir wissen, niemals existiert, da Arrays 0-indiziert sind und nicht -1. Stattdessen könnten Sie das vorherige Bild als i-1 referenzieren, während i> 0 ist, und wenn i === 0, wird das vorherige Bild auf den Indexbildern sein [max] – lmenus

Ich hoffe, ich mache Sinn. Ich würde 'var previous = i> 0 erstellen? images [i-1]: images [max]; 'und dann brauchst du diesen fehlerhaften Zustand überhaupt nicht, und du kannst' previous.removeClass() 'usw. – lmenus

Hinweis zum nächsten Debugging: Die Konsole sollte es dir sagen In welcher Zeile der Fehler aufgetreten ist, das ist der Anfang. Sie konnten sehen, dass der Zustand fehlerhaft war. Da Sie auf einen Array-Eintrag zugreifen und sich die Konsole über den Typ "undefined" beschwert, greifen Sie auf einen Index zu, für den kein gültiger Wert festgelegt ist. Das ist kein Problem für sich selbst, aber dann haben Sie versucht, eine Methode 'removeClass()' darauf zu nennen, und deshalb beschwerte sich die Konsole - undefined hat keine solche Eigenschaft. Daraus können Sie ableiten, dass Sie auf ein nicht vorhandenes Element zugreifen. Hoffe, dass hilft – lmenus

I get this console error "Uncaught TypeError: Cannot read property 'removeClass' of undefined".

Dieser Fehler ist, da der Code i++ zuerst ausgeführt wird, dann images[i].removeClass('main-image-slider-right')... laufen.

images[i].removeClass('main-image-slider-left').addClass('main-image-slider-right').delay(100).queue(function() { 
    // the 'i' is already added 1, so it may equal images[max], so you got that error 
    images[i].removeClass('main-image-slider-right').addClass('main-image-slider-center').dequeue(); 
});

Sie können i++ in queue bewegen:

images[i].removeClass('main-image-slider-left').addClass('main-image-slider-right').delay(100).queue(function() { 
    images[i].removeClass('main-image-slider-right').addClass('main-image-slider-center').dequeue(); 
    // after all the animation is done, at the end of queue update 'i'. 
    i++; 
});

du versuchen.

Hinweis: Vergessen Sie nicht, die i++ am Ende des Codes zu entfernen.

aktualisieren

Aktualisieren Sie den Code jsfiddle

Am Rand der Folien wird es nicht die Klasse aktualisieren mit if (images[i - 1]), wee Bedarf immer die Klasse der vorherigen Folie aktualisieren. Also änderte ich den Code zu

images[i == 0 ? images.length - 1 : i - 1].removeClass('main-image-slider-center').addClass('main-image-slider-left');

Quelle

2016-06-13 21:23:51

Hey Haizhou, arbeite ich nicht mit jQuery, aber warum würde es i ++ zuerst laufen, wenn es als letzte Operation in der Funktion definiert ist? – lmenus

@Haizhou Ich habe die Geige hier hinzugefügt. Dies scheint nicht zu funktionieren, aber es ist einen Schritt näher: https://jsfiddle.net/8na2n5L2/ –

@Lubos das ist, weil Sie die Funktion für 100ms "verzögern". Bitte überprüfen Sie jsFiddle [link] (https://jsfiddle.net/b96zoph6/). –

JavaScript/jQuery Image Slider Ausgabe

Antwort

Verwandte Themen