使用带间隙的箭头进行水平滚动答案

【问题标题】：horrizontal scrolling using arrows with a gap使用带间隙的箭头进行水平滚动
【发布时间】：2014-03-04 19:39:40
【问题描述】：

我正在使用水平 div 在 li 中显示图像。

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

这是我的 JS：

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

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

我正在尝试做的与这个非常相似，但我找不到如何让它工作...... http://jsfiddle.net/r6HwL/7/

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

感谢您的帮助！

【问题讨论】：

您需要计算幻灯片的总宽度，当左侧值大于或等于该总宽度时，您将停用下一个按钮以防止进一步滚动。对于上一个按钮，当左值为 0 时，您将其停用。

标签： javascript jquery css horizontal-scrolling

【解决方案1】：

这里有 2 个问题。第一个问题是您并没有真正滚动（您已经提到过），而是移动元素，这会使您在“滚动”出图像的实际可见性时看到两侧的空白区域。

对此，答案很简单。而不是使用 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/

希望这会有所帮助。 :)

【讨论】：

谢谢@Ardethian，我知道如何使用动画...问题是当侧面没有图像时不要让箭头工作;-) ...你能帮我吗请？
更新了我的评论。 :)
非常感谢@Ardethian 的帮助...现在我必须做一些数学运算！
如果我的评论对你有帮助，请投票。谢谢:)

【解决方案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了解更多详情。

【讨论】：