javascript - 为什么 margin 在 jquery 中被硬编码？

Question

我正在动态制作图像 slider (不想使用任何 硬编码 值)。我能够制作 slider ，但我有两个问题。

1. 为什么我需要 20px 的 ul 宽度。有没有办法不使用这个硬编码值。

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

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

这是我的代码 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
}

在下面找到工作片段:

我刚刚添加了一些 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>