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

建立jquery画廊，过渡有点偏

1 个答案: