Question

我尝试使用纯javascript创建内容滑块轮播，此轮播必须具有响应性，为此，我使用一些变量来设置和获取元素宽度。

因此，我使用.offsetWidth获得称为＆＃39; slider＆＃39;的容器宽度，之后，我使用一个循环设置每个幻灯片宽度与容器的宽度相同。为了方便任何人理解这里的HTML

＆＃13;

function createSlider(id) {
  var slider = document.getElementById(id),
    sliderContainerWidth = parseInt(document.getElementById(id).offsetWidth),
    ul = document.getElementById("carrousel"),
    ulLength = ul.children.length,
    i = 0;

  console.log(sliderWidth);

  function setUlWidth() {
    ul.style.width = (sliderContainerWidth * ulLength);
  }

  function setLiWidth() {
    for (i; i < ulLength; i++) {
      ul.children[i].style.width = sliderContainerWidth;
      //console.log(sliderContainerWidth)
    }
  }
  setUlWidth();
  setLiWidth();
}
createSlider('slider');

＆＃13;

<div id="slider">
  <ul id="carrousel">
    <li>SLIDE 1</li>
    <li style="background: #aaa;">SLIDE 2</li>
    <li>SLIDE 3</li>
    <li style="background: #aaa;">SLIDE 4</li>
  </ul>
</div>

＆＃13;

如果我尝试使用offsetWidth设置没有任何反应，但是如果我使用固定值工作则没问题。

任何人都可以帮助我吗？

Answer 1

需要使用包含单位标记的字符串设置

style.width，在这种情况下为＆＃34; px＆＃34;像素：

  function setUlWidth() {
    ul.style.width = (sliderContainerWidth * ulLength) +"px";
  }

  function setLiWidth() {
    for (i; i < ulLength; i++) {
      ul.children[i].style.width = sliderContainerWidth + "px";
      console.log(sliderContainerWidth)
    }
  }

此外，FWIW，offsetWidth property of Element nodes是一个已经四舍五入到最接近的整数的数字 - 您不需要使用parsInt从字符串转换它。

使用带有原始javascript

1 个答案: