javascript - 容器宽度+边距左移时不显示所有图像

我有以下HTML代码:

$(document).ready(function() {

  calculate_width();

  $('#moveleft').click(function() {
    var loga = $('#marki #loga');

    if ($('#marki .container').width() + Math.abs(parseInt(loga.css('margin-left'))) < loga.width()) {
      loga.animate({
        'margin-left': "-=100px"
      });
    }
  });
  $('#moveright').click(function() {
    var loga = $('#marki #loga');

    if (parseInt(loga.css('margin-left')) < 0) {
      loga.animate({
        'margin-left': "+=100px"
      });
    }
  });
});

function calculate_width() {
  var szerokosc = 0;

  $('#loga a img').each(function() {
    szerokosc += $(this).outerWidth(true);
  });
  $('#marki #loga').width(szerokosc);
}

#marki .container {
    height: 50px;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

#marki #loga {
    font-size: 0px;
}

#marki a {
    display: inline-block;
    margin: 0 30px 0 0;
    line-height: 50px;
    text-decoration: none;
}

#marki a:last-of-type {
    margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="marki">
  <div class="container">
    <div id="loga">
      <a href="">
        <img src="http://via.placeholder.com/200x200">
      </a>
      <a href="">
        <img src="http://via.placeholder.com/200x200">
      </a>
      <a href="">
        <img src="http://via.placeholder.com/200x200">
      </a>
      <a href="">
        <img src="http://via.placeholder.com/200x200">
      </a>
      <a href="">
        <img src="http://via.placeholder.com/200x200">
      </a>
      <a href="">
        <img src="http://via.placeholder.com/200x200">
      </a>
      <a href="">
        <img src="http://via.placeholder.com/200x200">
      </a>
      <a href="">
        <img src="http://via.placeholder.com/200x200">
      </a>
      <a href="">
        <img src="http://via.placeholder.com/200x200">
      </a>
      <a href="">
        <img src="http://via.placeholder.com/200x200">
      </a>
      <a href="">
        <img src="http://via.placeholder.com/200x200">
      </a>
      <a href="">
        <img src="http://via.placeholder.com/200x200">
      </a>
      <a href="">
        <img src="http://via.placeholder.com/200x200">
      </a>
      <a href="">
        <img src="http://via.placeholder.com/200x200">
      </a>
      <a href="">
        <img src="http://via.placeholder.com/200x200">
      </a>
      <a href="">
        <img src="http://via.placeholder.com/200x200">
      </a>
      <a href="">
        <img src="http://via.placeholder.com/200x200">
      </a>
    </div>
  </div>
</div>
<div style="padding:20px;">
  <button id="moveright" style="float:left;"><<</button>
  <button id="moveleft" style="float:right;">>></button>
</div>

如您所见，当我单击>>按钮时，$('#marki #loga')成为-+ 100px的'margin-left'属性。

但是我想要实现，可以滚动到最后一张图像。但是计算:$('#marki .container').width() + Math.abs(parseInt(loga.css('margin-left'))) < loga.width()当剩余三个图像要显示时为false。

我算错了什么？图片列表是动态变化的，所以我不能使用图片的const宽度。

最佳答案

实际上，当loga div的右侧到达容器的右侧时，您想停止滚动。


就数学而言，此条件是margin-left属性的绝对值+容器宽度等于loga div，这正是您所做的，因此这不是问题。

问题是您的loga div的宽度为3400px，并且您有17个<a>块，每个块的宽度为225px。但是17 * 225 = 3825，这就是为什么当代码达到3400px时您缺少那些块的原因。缺少425px。只需删除loga div的固定宽度即可解决问题