使用带间隙的箭头进行水平滚动 [英] horrizontal scrolling using arrows with a gap

问题描述

我正在使用水平div在li内显示图像.

I'm using an horizontal div to display images inside li.

我想使用箭头(左和右)添加水平导航. 单击左箭头时，我的div滚动为156px，单击右箭头为156px. 我尝试使用此JS执行此操作.但这不是真正的滚动，并且在我的div末尾它一直在滚动.

I would like to add an horizontal navigation using arrows (left & right). when clicking on the left arrow, my div scrolls of 156px, and when clicking on the right arrow 156px to. I tried to do this with this JS. but it's not a real scroll, and at the end of my div it keeps scrolling.

这是我的JS:

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

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

here is a JSfiddle with my actual code http://jsfiddle.net/PAw8q/5/

我正在尝试做的事情几乎与此类似，但是我找不到如何使它工作的方法....................................... http://jsfiddle.net/r6HwL/7/

what I'm trying to do is pretty much like this one, but I can't find how to make it work... http://jsfiddle.net/r6HwL/7/

我希望有人会愿意帮助我，

I hope someone woulb be abble to help me with this,

感谢您的帮助！

推荐答案

您在这里有2个问题. 第一个问题是您并不是真正在滚动(如前所述)，而是在移动元素，这使您在滚动"出图像的实际可见度时看到侧面的空白.

You have 2 problems here. The first problem is that you're not really scrolling (which you've mentioned), but moving the element, which makes you see empty spaces on the sides when 'scrolling' out of the images' actual visibility.

对此，答案很简单.您无需使用jQuery的CSS解决方案，而需要使用jQuery Animate在div中实际滚动，如下所示:

To that, the answer is simple. Instead of using jQuery's CSS solution, you need to use jQuery Animate to actually scroll within the div, like so:

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

现在我们要解决第二个问题-包含图像的div确实没有边界的事实. 您需要给图像包装器一个小于您给nav_container div的宽度的宽度，然后给它一个溢出:none属性，这样它就不会显示其余图像.

Now we get to the second problem - the fact that the div holding the images doesn't really have boundaries. You'll need to give the image wrapper a width that's smaller than the width you gave to the nav_container div, and then give it an overflow: none property so it doesn't show the rest of the images.

然后，当div不移动并且唯一移动的是其中的实际滚动时，您可以看到所有内容如何放置:

Then, when the div isn't moving around and when the only thing moving is the actual scroll within it, you can see how everything falls into place:

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

希望这会有所帮助. :)

Hope this helps. :)

这篇关于使用带间隙的箭头进行水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！