Question

我使用具有左右按钮的jquery创建了一个水平滚动条。

<div id="container">
<ol>
    <li class="a"></li>
    <li class="b"></li>
    <li class="c"></li>
    <li class="d"></li>
    <li class="e"></li>
</ol>
</div>

<button id="left">left</button>
<button id="right">right</button>

容器隐藏了溢出并具有相对定位，并且使用以下jquery将内容向左或向右移入或移出视图：

$('#left').on('click',function(){
    $('ol').css('left','-=100px');
});

$('#right').on('click',function(){
    $('ol').css('left','+=100px');
});

问题是这些功能是无限的，你可以永远点击它们，它们将继续越走越远。我想限制它，以便一旦没有更多的对象进入视图，该函数就会做其他事情。

我想有很多方法可以做到这一点，但我想到的方式似乎都不那么优雅。例如，计算容器的大小，以及内部项目宽度的总和，并保持按下每个按钮的次数的计数，并在每次按下按钮时进行一些常数运算。

I've made a JS fiddle of this if I've not explained it very well.

理想情况下，在这个例子中，你永远不会看到粉红色的块。

Answer 1

您只需要声明：

$('#left').on('click',function(){
    if ($('ol').css('left') != '0px') {
         $('ol').css('left','-=100px');
    }
});


$('#right').on('click',function(){
    if ($('ol').css('left') != '300px') {
        console.log($('ol').css('left'));
         $('ol').css('left','+=100px');
    }
});

http://jsfiddle.net/kqhNr/4/

限制此自定义导航的水平滚动

1 个答案: