为什么在jquery中硬编码margin？

Question

我正在动态制作图像滑块（不想使用任何hard corded 值）。我可以制作滑块但我有两个问题。

1. 为什么我在ul 宽度中需要更多20px。有什么办法不使用这个硬线值。

    $('#list').css('width',$('#list').find('.box').length*li_Width+20)
   

   • 为什么当用户单击next 按钮时，框的一部分left。例如，当用户单击next 按钮时，它显示next 框而不显示任何部分（绿色框）。 .但是当用户单击下一个按钮时，它会显示blue 框的某些部分，为什么？为什么它没有完全滑动？如果用户再次单击下一个按钮，它会再次显示更多红色部分，为什么？

这是我的代码 https://plnkr.co/edit/t2yOFkO1QBWOVLFreiXm?p=preview

// 代码在这里

$(function(){

  var li_Width =$('#list').find('.box:first').outerWidth(true);
  // why 20 pixel is hardcorded
  $('#list').css('width',$('#list').find('.box').length*li_Width+20)
 $('#next').click(function(){
  $('#list').css('margin-left',addToMarginLeft($('#list'),-li_Width))
 })
 $('#pre').click(function(){
    $('#list').css('margin-left',addToMarginLeft($('#list'),li_Width))
 })

 function addToMarginLeft(elem, pixels) {
    var ml = parseFloat(elem.css('margin-left'));
    elem.animate({
    'margin-left': (ml + pixels) + 'px'
    },1000)

  }

})  

Answer 1

我认为这是由于 css inline-block element 之间的空白。 这会导致一些额外的空间，所以为什么你必须添加 20px 。

最后有几种方法可以解决这个问题：在 li 之间进行注释或将字体大小设置为 0，如下所示：

ul {
  ...
  font-size: 0
}

您会在下面找到工作的 sn-p ：

我刚刚添加了一些 jquery 代码来防止在最后一个动画完成之前触发另一个动画的多次单击按钮：

// Code goes here
$(function() {

  var li_Width = $('#list').find('.box:first').outerWidth(true);
  // 20 px removed !!!
  $('#list').css('width', $('#list').find('.box').length * li_Width)

  $('#next').click(function() {
    if( !$("#list").is(":animated") )
    $('#list').css('margin-left', addToMarginLeft($('#list'), -li_Width))
  })
  $('#pre').click(function() {
    if( !$("#list").is(":animated") )
    $('#list').css('margin-left', addToMarginLeft($('#list'), li_Width))
  })

  function addToMarginLeft(elem, pixels) {
    var ml = parseFloat(elem.css('margin-left'));
    elem.animate({
      'margin-left': (ml + pixels) + 'px'
    }, 1000)

  }

})

/* Styles go here */

.box {
  width: 100px;
  height: 100px;
}

body {
  margin: 0px;
  padding: 0px;
}

.green {
  background-color: green;
}

.red {
  background-color: red;
}

.pink {
  background-color: pink;
}

.yellow {
  background-color: yellow;
}

.blue {
  background-color: blue;
}

.orange {
  background-color: orange;
}

ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
  width: 1300px;
  /* here you set font to 0 for extra space */
  font-size: 0
}

li {
  display: inline-block;
  margin-left: 15px;
  padding: 0;
}

#container {
  width: 300px;
  margin: 0 auto 0 auto;
  overflow: hidden;
}

#list {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <button id="next">next</button>
  <button id="pre">pre</button>
  <ul id="list">
    <li class="box green">
    </li>
    <li class="box blue">
    </li>
    <li class="box red">
    </li>
    <li class="box yellow">
    </li>
    <li class="box pink">
    </li>
    <li class="box orange">
    </li>
  </ul>
</div>