Question

我正在使用此脚本作为我的微笑滑块http://codepen.io/zuraizm/pen/vGDHl，

但是当我尝试在css中设置#slider ul li width to 90%它想要工作时，我已经检查了js，如果我使用百分比宽度意图像素，它会为我返回0值

var slideWidth = $('#slider ul li').width();

但如果我在css中设置#slider ul li width to 100px;，则会以正确的方式计算它。

我已经读过不同的百分比和像素，似乎每个人都说$('#slider ul li').width()应该返回px而不是百分比，但它会为我返回0。

正是我想要的是让我的滑块宽度为90％，最大宽度为760像素，但是当我改变宽度时，它会导致计算js。

Answer 1

您要将ul设置为slideCount * slideWidth。如果您使用4张幻灯片滑动宽度为500px，则ul宽度将为2000px。如果您的li宽度设置为90％，则为1800px。你明白了吗？

您希望将每个li宽度设置为与滑块宽度相同，因此请在代码的中间添加一行：

...
$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
$('#slider ul li').css({ width: slideWidth });
$('#slider ul li:last-child').prependTo('#slider ul');
...

您可以通过为li设置样式来确定幻灯片宽度，但在使用jquery设置“滑块”时，可以将css添加到#slider和ul。我建议在#slider上设置高度和宽度，然后将其从ul和li中删除。检查这个小提琴：http://jsfiddle.net/hfbmma1r/

JQuery更改宽度，以百分比问题给出。

1 个答案: