jquery - 构建 jquery 画廊，过渡有点偏离

Question

我已经建立了这个大部分工作的画廊。问题是，当我单击右箭头时，我的画廊项目从屏幕滑出到空无一物，然后下一个图像就出现了（而不是下一个图像随之滑动）。当你点击左箭头时，它是相反的，画廊图像立即消失并滑入新的。知道发生了什么吗？你可以去这里看看我在说什么：http: //jsfiddle.net/grem28/dhUEc/

这是js：

$(function(){

    var curImg = 0;

    $('#leftArrow a').click(function(e){
            e.preventDefault();

            if(curImg!=0){      
                curImg--;

                $('.image_reel').css('left','+=323px');

            }else{
                curImg = ($('.image_reel img').size()-1);
                $('.image_reel').css('left',-($('.image_reel img').width()*($('.image_reel img').size()-1)));
            }

    });

    $('#rightArrow a').click(function(e){
        e.preventDefault()

            if(curImg==($('.image_reel img').size()-1)){
                    curImg = 0;

                $('.image_reel').css('left','0px');

            } else {
                curImg++;

                $('.image_reel').css('left','-=323px');
            }

    });

});

Answer 1

如果您删除overflow: hidden，您可以看到实际发生的情况：

http://jsfiddle.net/dhUEc/1/

这些图像实际上在下面，只有在有空间容纳它们时才会弹出。我建议float从图像中删除并添加white-space: nowrap到图像卷轴中。您可能还需要添加font-size: 0以删除图像之间的所有空间。

.image_reel {
    white-space: nowrap;
    font-size: 0;
    /* ... */
}

http://jsfiddle.net/dhUEc/3