divをアニメーション化する方法は、各子画像の幅です。そして最後に、私は、カルーセルのためにいくつかのコードを書かれているが、私はそれは少し作業が必要だと思い始め

Question

に戻すには、まず私は、DOM

コンテナ
画像コンテナ
IMG
IMG
を説明します IMG
端イメージ容器
NAV
は
右
端NAV
を残し各IMG左浮かぶが、異なる幅（同じ高さ）である端容器

、Iは画像のコンテナの幅を合わせた幅と同じになるように取得するためのjQueryを使用しています。

ので、これは私の右クリック（まだ残っていない）

$('#container .container-nav .container-nav-right').click(function(){ 
    var scrollAmount = $('.container-images img').width(); 
    $("#container .container-images").animate({'left':'-=' + scrollAmount}, 'slow'); 
}); 

ので、これは230pxと言うことで、それぞれの時間に沿ってコンテナのdivを移動させているが、私はそれはそれに230を移動したい、240、260等が含まれている画像に基づいて。

また、最後の画像に到達したらコードをリセットしたいと考えています。

私はそこに多くのプラグインがあることを知っていますが、私はこれを自分自身で理解してみたいです。私が自分自身を説明してくれることを願う。

誰でもいいですね。私がここからどこへ行くかについての提案？ これをお読みいただきありがとうございます！

Answer 1

kinakutaの答えを説明するための小さなコード：

var selectedImage = $('.container-images img:first'); 

$('#container .container-nav .container-nav-right').click(function(){ 
    var scrollAmount = selectedImage.width(); 
    $("#container .container-images").animate({'left':'-=' + scrollAmount}, 'slow'); 
    selectedImage = selectedImage.next(); 
}); 

Answer 2

個々の画像を選択する必要があります。セレクタに一致するすべての画像を取得し、最初の画像の幅（）だけを返します。これを解決する1つの方法は、「選択された」画像のクラスを追加/削除することです。 「現在の」クラスを持つ最初のイメージから開始し、それを使用してより特定のセレクタを作成します。次に、次のイメージに移動すると、現在のイメージからイメージを削除し、次のイメージに追加します。これを達成する他の方法がありますが、私の頭の上から離れて、これが私の最初の戦略になるでしょう。

ああ、質問の第2部分を忘れました。次のイメージを取得するには、現在のイメージのnext（）メソッドを呼び出します。何も返されなければ、イメージの終わりに達し、最初に戻ることができます。