Question

我正在使用水平div来显示li里面的图像。

我想使用箭头（左和右）添加水平导航。当点击左箭头时，我的div滚动156px，当点击右箭头156px时。我尝试用这个JS做到这一点。但它不是一个真正的卷轴，在我的div的末尾它继续滚动。

这是我的JS：

$('#next_nav').click(function () {
       $( "#nav" ).css('left','-=156px');
    });
    $('#prev_nav').click(function () {
       $( "#nav" ).css('left','+=156px');
    });

这是一个带有我的实际代码http://jsfiddle.net/PAw8q/5/

的JSfiddle

我想要做的就是这个，但我找不到如何让它发挥作用...... http://jsfiddle.net/r6HwL/7/

我希望有人能够帮助我解决这个问题，

感谢您的帮助！

Answer 1

这里有2个问题。第一个问题是你不是真正滚动（你已经提到过），而是移动元素，这会让你在滚动时看到侧面的空白区域。出于图像＆＃39;实际可见度。

对此，答案很简单。而不是使用jQuery的CSS解决方案，你需要使用jQuery Animate实际在div中滚动，如下所示：

$('#next_nav').click(function () {
    $( "#nav" ).animate({
        scrollLeft: '+=156px'
    });
});
$('#prev_nav').click(function () {
    $( "#nav" ).animate({
        scrollLeft: '-=156px'
    });
});

现在我们遇到第二个问题 - 持有图像的div并没有真正的边界。您需要为图像包装器提供一个小于您给nav_container div的宽度的宽度，然后给它一个overflow：none属性，这样它就不会显示其余的图像。

然后，当div没有移动时，当唯一移动的东西是其中的实际滚动时，你可以看到一切都落在了什么位置：

http://jsfiddle.net/PAw8q/10/

希望这会有所帮助。：）

Answer 2

就像Ardethian所说，我想改变#nav的CSS：

#nav{
    position: absolute; 
    width: 967px;
    overflow: hidden;
}

但是使用它作为JS可以解决你的问题。

$("#slide").attr("src", $("li.activeSlide .image_thumbnails").attr("src"));
$('#next_nav').click(function () {
    $active = $("#nav li.activeSlide");
    $next = $active.next();
    if( $next.length > 0 ) {
        $( "#nav" ).animate({
            scrollLeft: '+=156px'
        });                    
        $active.toggleClass("activeSlide");
        $next.toggleClass("activeSlide");        
        $("#slide").attr("src", $("li.activeSlide .image_thumbnails").attr("src"));
    }
});
$('#prev_nav').click(function () {

    $active = $("#nav li.activeSlide");
    $prev = $active.prev(); 
    if( $prev.length > 0 ) {
        $( "#nav" ).animate({
            scrollLeft: '-=156px'
        });
        $active.toggleClass("activeSlide");
        $prev.toggleClass("activeSlide");  
        $("#slide").attr("src", $("li.activeSlide .image_thumbnails").attr("src"));
    }    
});

JS将查看它是否可以向左/向右然后它将动画。最后，它会更新.activeSlide以显示。

查看 Demo 了解更多详情。

水平滚动使用带有间隙的箭头

2 个答案: