Ich versuche, einen sehr, sehr einfachen Bildschieberegler / eine Diashow ohne Autoplay zu erstellen. Ich möchte nur mit einem Klick zum nächsten oder vorherigen Bild gehen. Haben Sie einige Probleme, wie Sie unten lesen können.

Hier ist diejsFiddle http://jsfiddle.net/HsEne/12/ (Ich habe nur Hintergrundfarben anstelle von Bildern in der Geige verwendet und das Bild auf Divs umgestellt, aber es ist natürlich genau das gleiche Problem.)

Der HTML:

<div id="slider-wrapper">

<div id="slider">
<img class="sp" src="/img1.jpg">
<img class="sp" src="/img2.jpg">
<img class="sp" src="/img3.jpg">
<img class="sp" src="/img4.jpg">
<img class="sp" src="/img5.jpg">
<img class="sp" src="/img6.jpg">
</div>

<img id="button-previous" src="/button-arrow-left.jpg">
<img id="button-next" src="/button-arrow-right.jpg">
</div>

Das CSS:

#slider-wrapper {
display: block;
max-width: 790px;
margin: 5% auto;
max-height: 500px;
height: 100%; }

#slider {
display: block;
position: relative;
z-index: 99999;
max-width: 710px;
width: 100%;
margin: 0 auto; }

#button-previous { 
position: relative;
left: 0;
margin-top: 40%;
width: 40px;
height: 60px; }

#button-next {
position: relative;
margin-top: 40%;
float: right; }

.sp {
position: absolute; }

#slider .sp {
max-width: 710px;
width: 100%;
max-height: 500px; }

jQuery für die nächste Schaltfläche:

jQuery("document").ready(function(){
    jQuery("#slider > img:gt(0)").hide();
     jQuery("#button-next").click(function() { 
        jQuery("#slider > img:first")
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .appendTo("#slider");
  });
});

Die obige jQuery funktioniert einwandfrei, mit der Ausnahme, dass das erste Bild übersprungen wird, wenn ein Benutzer auf der letzten Folie auf die nächste Schaltfläche klickt. Es wird nur das erste Bild einmal angezeigt. Alle anderen Bilder werden bei jedem nächsten Klick verschoben. Aus irgendeinem Grund wird keine Anzeige zum ersten Bild hinzugefügt, aber ich weiß nicht, woher dieser Code kommt.

jQuery für vorherigen Button:

jQuery("document").ready(function(){
    jQuery("#slider > img:gt(0)").hide();
     jQuery("#button-previous").click(function() { 
        jQuery("#slider > img:last")
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .appendTo("#slider");
  });
});

Dieser Abfragecode oben gibt das soeben angezeigte Bild so zurück, wie es sein sollte. Ein erneuter Klick macht aber nichts.

Ich habe auch versucht .prev () anstelle von .next (). Es funktioniert einwandfrei, wenn Sie zum ersten Mal auf die vorherige Schaltfläche klicken. Angenommen, wir betrachten Bild 4. Wenn ich auf die vorherige Schaltfläche klicke, wechselt das Bild wie gewünscht zu Bild 3. Wenn Sie erneut darauf klicken, wird nicht Bild 2 angezeigt, sondern Bild 4, dann Bild 3 und dann Bild 4, wobei sich das Bild wiederholt.