jquery - jqueryを使用してdivコンテンツをスライドできません

Question

div内の画像を1つずつ左に移動しようとしていますが、ボタンをクリックするだけで1つの画像しか移動できません。div内の画像をスライドさせたいと思っています。これがjsfiddleの私のコードです。 http://jsfiddle.net/K2JBg/

Answer 1

jsFiddleデモ

• 最後の画像に到達したら、スライダーを開始位置に回すのは難しいので、モジュラスを使用してカウンターを「0」に回してみましょう。
• スライダーを動かして基本的な計算を行うよりも：-300px * the current Counter value。

クリックカウンターが増えるたびに増加しますが、画像の数に達すると、4値に戻ります。これにより、ギャラリーが左に「0px」にスライドします0。300px * 0 = 0

jQuery：

var imgN = $('#slide div img').length; // number of images
var c = 0; // just a Counter
$("#btn").click(function() {
    c = ++c % imgN;      // once it reaches the imgN will turn to '0'
    $("#slide div").animate({left: -300*c }, "fast");   // let's use our math!
});

変更されたCSS：

    #slide{
        height: 300px;
        width:300px;
        overflow: hidden;
        position:relative;
    }
    #slide div{
        position: absolute;
        left: 0px;
        top:0px;
        width:9000px;    /*make sure to have a big value here if you don't want to do it dynamically with jQUery*/
    }
   #slide img{
        vertical-align: top;
        height: 300px;
        width: 300px;
        float:left;
    }