Verwirrung in Bezug auf Selektoren in Karussell/Slider

Question

so bin ich ziemlich neu in Javascript/jquery. Vor kurzem habe ich eine Website gemacht, die die Farbe des Rahmens ändert, je nachdem, was Sie aus einem Karussell/Slider auswählen.

Alles ist betriebsbereit, nur Problem ist, kann ich nicht einfach meinen Kopf um mich, wie Selektor auf Elemente meines Karussells richtig anwenden.

Grundsätzlich mein Karussell sieht so etwas wie dieses

Was ich tun möchte, ist, dass ich die dritte Grenze/Frame festgelegt haben versteckt werden. Nun, wenn Sie klicken Sie auf den Pfeil nach links das Element am nächsten auf der linken Seite wechselt zu versteckt, während das Bild rechts von ihm wird seine Position und das zuvor versteckte Bild wird angezeigt.

So ist alles wie erwartet funktioniert, nur Problem ist, dass dies nur einmal funktionieren wird (vor allem, weil ich nicht:

Das Gegenteil nach rechts geht, habe ich es so gemacht wissen, welcher Selektor zu verwenden ist).

Um die Dinge in einen Kontext zu setzen, meine HTML (speziell für das Karussell) sieht wie folgt aus

<div id="selector"> 
    <img id="goleft" src="images/left.png" /> 
    <div> 
     <img id="blue" src="images/shot-blue.png" /> 
     <img id="yellow" src="images/shot-yellow.png" /> 
     <img id="red" src="images/shot-red.png" /> 
    </div> 
    <img id="goright" src="images/right.png" /> 
</div> 

nichts zu schwierig

Meine jQuery als auch sehr einfach

<script type="text/javascript"> 
    $(document).ready(function() { 
     //Set the last (red) image to be hidden 
     $("#selector div img:last").hide(); 
     // If we click left, hide the first one and show the last one 
     $("#goleft").click(function(){ 
     $("#selector div img:first").hide('slow') 
     $("#selector div img:last").show('slow') 
     }); 
     // Similar for right 
     $("#goright").click(function(){ 
     $("#selector div img:last").hide('slow') 
     $("#selector div img:first").show('slow') 
     }); 
    }); 
</script> 

Nur Problem ist, die :first und :last Selektor wörtlich wählen Sie das erste und letzte Bild anstelle des ersten sichtbaren und letzten versteckten Elements

Also im Grunde hält mein Karussell nach dem ersten Drehung arbeitet (auf beiden Seiten)

Jede Idee, wie richtig die Wähler auszuüben, um die Rotation endlos?

Answer 1

das: erste und: letzte Wähler wählen wahrsten Sinne des Wortes das erste und letzte Bild anstelle des ersten sichtbaren und zuletzt die letzten und ersten Methoden verborgenes Element

Sie versteckte und sichtbare Selektor verwenden können und verwenden von jquery:

$("#selector div img:hidden").first().show();  
$("#selector div img:visible").last().hide(); 

Update: beachten Sie, dass Sie nicht sofort diese Aussagen nacheinander ausführen können sonst haben Sie jquery Aussagen über etwas auszuführen, die noch nicht verborgen ist.Was Sie tun können, um dies zu verhindern ist die Callback-Funktion auf der Messe zu nutzen und wie diese auszublenden:

$("#selector div img:visible").last().hide('slow', function() 
    { 
     $("#selector div img:hidden").first().show('slow'); 
    } 
); 

Auch hier ist ein jsfiddle mit der vollständigen Umsetzung ist:

https://jsfiddle.net/4sh7cnub/

Ich benutzte Spanne mit einige css anstelle von Bildern, also müssen Sie span für Ihren eigenen Fall in img ändern.