无法使用jquery滑动div内容

我正在尝试将div中的图像一个接一个地向左移动。但我只能在单击按钮时移动一个图像。我希望滑动div中的图像。 这是我在JSFIDLE上的代码。

• 一旦到达最后一张图像，将滑块转到起始位置就很难了，所以让我们使用模数将计数器转到“0”
• 而不仅仅是移动滑块做一些基本的数学运算：

  -300px*当前计数器值

每次单击后，计数器将增加，但一旦达到图像数

4

，它将跳回值

0

-

300px*0=0

，并将您的多媒体资料滑回“0px”左侧

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

---

您没有指定：滑块到达最后一个图像后会发生什么？是的，我知道…但现在我只想滑动第一个图像，以便显示第二个图像…我