1

我使用具有左右按钮的 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');
});

问题是这些功能是无限的，你可以一直点击，它们会越来越远离屏幕。我想限制这一点，以便一旦没有更多对象可供查看，该函数就会执行其他操作。

我想有很多方法可以做到这一点，但我认为没有一种方法看起来那么优雅。例如，计算容器的大小，以及内部项目的总宽度，并记录每个按钮被按下的次数，并在每次按下按钮时做一些恒定的数学运算。

如果我没有很好地解释它，我已经做了一个 JS 小提琴。

理想情况下，在该示例中，您永远不会看到粉红色的块。

4

1 回答 1

2

您只需要 if 语句：

$('#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/

于 2013-03-06T07:11:37.710 回答