カルーセル/スライダーのセレクタに関する混乱

Question

私はかなりjavascript/jqueryに新しいです。最近私は、カルーセル/スライダーから選択したものに応じてフレームの色を変えるウェブサイトを作った。

すべてが動作しているだけですが、私のカルーセルの要素にセレクタを適切に適用する方法については頭がいっぱいです。

基本的に私のカルーセルは、この

ようになり、私が何をしたいのか、私は隠される第三の境界線/フレームを設定しています。 今、いつでも左矢印をクリックすると、左に最も近い要素が非表示に切り替わり、右の画像がその位置になり、以前隠された画像が表示されます。

反対が右に行く、私はこのようにそれを作った：

期待ようにすべてが動作している、唯一の問題は、これが唯一の（一回動作します、私はそうではない主な理由使用するセレクタを知っている）。

は、コンテキストに物事を配置するには、（特にカルーセル用）私のHTMLはあまりにも難しいこの

<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> 

何もないように見えます

私のjQueryのだけでなく、非常に基本的なものです

<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> 

のみ:firstと:lastセレクタは文字通り最初に表示された最後の隠し要素の代わりに最初と最後の画像を選択します

だから、基本的に私のカルーセルは、（両側）最初の回転の後に動作を停止し

回転は無限大ですので、適切にセレクタを適用する方法任意のアイデア？

Answer 1

：最初と：最後のセレクタは文字通り代わりに隠し可視セレクタを使用し、最後と最初の方法を使用することができ

第可視および最後の隠し要素の最初と最後の 画像を選択します

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

更新：jqueryののあなたはすぐにこれらのステートメントを次々に実行することはできませんのでご注意それ以外のあなたはjqueryのは、まだ隠されていない何かのステートメントを実行しています。あなたは、このショーにコールバック関数を使用して、このように非表示にすることで防ぐことができます：

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

ここも完全な実装とjsfiddleです：

https://jsfiddle.net/4sh7cnub/

私はスパンを使用しましたイメージの代わりにいくつかのCSSがありますので、独自のケースではspanをimgに変更する必要があります。