Javascript 为什么在jquery中给出了硬编码的保证金？

我正在动态制作图像滑块（不想使用任何

硬记录的值）。我可以制作滑块，但我有两个问题

为什么我需要
20px
更多的
ul
宽度。有没有办法不使用这个硬记录的值

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


为什么用户单击“下一步”按钮时框的某个部分
左侧
。例如，当用户单击“下一步”按钮时，它会显示“下一步”
框，而不显示任何部分（绿色框）。但当用户单击“下一步”按钮时，它会显示“蓝色框”的某个部分，为什么？为什么它不能完全滑动？如果用户再次单击“下一步”按钮，它会再次显示更多红色部分，为什么


这是我的密码

//代码在这里

$(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)

  }

})  

我认为这是由于css
内联块
元素之间的空白造成的。
这会导致一些额外的空间，所以你必须添加20px

有几种方法可以解决这最后一个问题：在li之间输入字符或仅将字体大小设置为0，如下面所示：

ul {
  ...
  font-size: 0
}

下面是您找到的工作片段：

我刚刚添加了一些jquery代码，以防止在最后一个Annation完成之前触发另一个Annation的miltiple click按钮：


//代码在这里
$（函数（）{
var li_Width=$（'#list'）.find（'.box:first'）.outerWidth（true）；
//移除20像素！！！
$（'.'列表'）.css（'宽度'，$（'.'列表'）.find（'.box'）.length*liu-width）
$（“#下一步”）。单击（函数（）{
如果（！$（“#列表”）是（“：动画”））
$（“#列表”）.css（'margin-left'，addToMarginLeft（$（“#列表”），-li#Width））
})
$（'#pre'）。单击（函数（）{
如果（！$（“#列表”）是（“：动画”））
$（“#列表”）.css（'margin-left'，addToMarginLeft（$（'#列表'），li#Width））
})
函数addToMarginLeft（元素，像素）{
var ml=parseFloat（elem.css（'margin-left'）；
动画元素({
“左边距”：（ml+像素）+“px”
}, 1000)
}
})
/*样式在这里*/
.盒子{
宽度：100px；
高度：100px；
}
身体{
边际：0px；
填充：0px；
}
格林先生{
背景颜色：绿色；
}
瑞德先生{
背景色：红色；
}
.粉红{
背景颜色：粉红色；
}
黄先生{
背景颜色：黄色；
}
蓝先生{
背景颜色：蓝色；
}
.橙色{
背景颜色：橙色；
}
保险商实验室{
列表样式：无；
填充：0px；
边际：0px；
宽度：1300px；
/*在这里，您可以将字体设置为0以获得额外的空间*/
字号：0
}
李{
显示：内联块；
左边距：15px；
填充：0；
}
#容器{
宽度：300px；
边距：0自动0自动；
溢出：隐藏；
}
#名单{
边框：1px纯黑；
}

下一个
之前














quest up++。