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

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

所有你需要的是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/