jquery - 无法使用 jquery 滑动 div 内容

Question

我正在尝试将 div 内的图像一张一张地向左移动。但我只能在单击按钮时移动一张图像。我正在寻找在 div 内滑动图像。这是我在 jsfiddle 上的代码。 http://jsfiddle.net/K2JBg/

Answer 1

jsFiddle 演示

• 到达最后一张图片后，最好将滑块转到起始位置，因此让我们使用模数将计数器转到“0”。
• 不仅仅是移动滑块做一些基本的数学运算：-300px * the current Counter value.

每次点击计数器都会增加，但一旦达到图像数量，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;
    }