javascript - Jquery - 根据条件向左或向右 move 元素

Question

大家好，我解释一下我的问题，我创建了一个 500px 宽、100px 高的主容器( overflow hidden )...

在一个容器内有 2 个不同的盒子，总是 500px 100px，我会插入一些 100px X 100px 的盒子，再加上两个控制按钮将容器 move 到 100px 的右侧或左侧。

这些框是可见的 5，例如，如果有 8 个，我想单击“右”按钮，容器 2 会 move 100px，但是当它们到达最后一个 block (在本例中是 8)时，按钮会转到右键必须禁用。相反，如果我们启动左侧的 Go 按钮，则必须禁用该按钮，直到右侧至少完成一步为止。

此外，正如您在单击时看到的那样，当我 move 框中包含的元素时，它会在 move 过程中消失，这件事不好，各种框必须 move 但始终保持可见。

在JSfiddle上我创建了一个演示，我无法创建正确的条件，你有解决方案吗？谢谢

enter link description here

$( "#right" ).click(function() {
  $( "#block" ).animate({ "left": "+=105px" }, "slow" );
    
});
 
$( "#left" ).click(function(){
  $( "#block" ).animate({ "left": "-=105px" }, "slow" );
});

.cont{
    width:530px;
    height:100px;
    position:absolute;
    background:#000;
    overflow:hidden;
}
.box-cont{
    width:auto;
    height:100px;
    position:absolute;
    background:yellow;
   
}
.box{
    width:100px;
    height:100px;
    position:relative;
    float:left;
    margin-left:5px;
    background:#F00;
    text-align:center;
    font-size:32px;
}
.btn{

    position:absolute;
    left:0px;
    top:120px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="cont">
  
    

    <div class="box-cont" id="block">
        
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
        <div class="box">7</div>
        <div class="box">8</div>
        
    </div>
    
    
</div>

<div class="btn">
    <button id="left">&laquo;</button>
    <button id="right">&raquo;</button>
</div>

Answer 1

你可以使用这样的东西:

<script>

    var totalBlocks         = $('#block div.box').length;
    var blockViews          = Math.round($('#block').width() / $('#block div.box').width());
    var currentPosition     = 0;

    $( "#right" ).click(function() {

        if(currentPosition > 0)
        {
            $( "#block" ).animate({ "left": "+=105px" }, "slow" );
            currentPosition--;
        }
    });

    $( "#left" ).click(function(){
        if(blockViews + (currentPosition+1) <= totalBlocks)
        {   
            $( "#block" ).animate({ "left": "-=105px" }, "slow" );
            currentPosition++;
      }
    });
</script>