javascript - 为什么图像不填充幻灯片容器，宽度/高度为 100%

Question

如果这是重复的道歉，我找不到答案。我正在制作一个纯 Javascript 幻灯片并且几乎完成了。然而，我面临着一个我似乎无法解决的问题。

我无法让图像以 100% 宽度和 100% 高度填充 div。完成后应该分别滑动所有图像，最终完成我的幻灯片放映。

解决步骤:我玩过 CSS，改变了相对和绝对之间的位置样式。我已将 width:100%; 添加到 div。我为图像添加了额外的样式 - #slide li img {width:100%; height:100%}; 然而似乎没有任何效果。如果 #slide li img & #slide li & #slide 的宽度/高度都为 100%，那么第一张图片会缩放到 100%在 Javascript 中设置的组合图像宽度和高度，这使它不成比例并且只会滑动那一张图像。

我已经尝试使用 document.getElementsByClassName 在 javascript 中单独设置宽度/高度，但它仍然没有填充 contaning div

代码如下:

function Slide() {
  ul = document.getElementById("slide");
  liItems = ul.children;
  liNumber = liItems.length;
  imageNumber = 0;
  sliderWidth = 0;
  currImg = 0;
  // Left + Right Arrows
  leftArrow = document.getElementById("left");
  rightArrow = document.getElementById("right");

  for (i = 0; i < liNumber; i++) {
    imageWidth = liItems[i].children[0].clientWidth;
    sliderWidth += imageWidth;
    imageNumber++;
  }
  // Set UL's Width as total width of all images in slider.
  ul.style.width = parseInt(sliderWidth) + "px";
  slider(ul);

  function slider(ul) {
    animate({
      delay: 1000 / 60,
      duration: 3000,
      delta: function(p) {
        return Math.max(0, -1 + 2 * p)
      },
      step: function(delta) {
        ul.style.left = '-' + parseInt(currImg * imageWidth + delta * imageWidth) + "px";
      },
      callback: function() {
        currImg++;
        //Keep sliding if not last image
        if (currImg < liNumber - 1) {
          slider(ul);
        }
        // Slide back to first image, if last image
        else {
          leftPosition = (liNumber - 1) * imageWidth;
          //after set seconds, call goback for first image
          setTimeout(function() {
            goBack(leftPosition)
          }, 2000);
          setTimeout(function() {
            slider(ul)
          }, 3000);
        }
      }
    });

    function goBack(leftPosition) {
      currImg = 0;
      setInterval(function() {
        if (leftPosition >= 0) {
          ul.style.left = '-' + parseInt(leftPosition) + "px";
          leftPosition -= imageWidth;
        }
      }, 1000 / 60);
    }

    function animate(opts) {
      start = new Date;
      id = setInterval(function() {
        timePassed = new Date - start;
        progress = timePassed / opts.duration
        if (progress > 1) {
          progress = 1;
        }
        delta = opts.delta(progress);
        opts.step(delta);
        if (progress == 1) {
          clearInterval(id);
          opts.callback();
        }
      }, opts.delay || 1000 / 60);
    }
  }
}
window.onload = Slide;

#slidecontainer {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
#slide {
  position: relative;
  z-index: 0;
  list-style-type: none;
  padding: 0;
}
#slide li {
  position: relative;
  left: 0;
  top: 4%;
  margin: 0;
  padding: 0;
  float: left;
  width: 25%;
  /* Adjust this value within the range of images i.e 4 images = 25%, 5 images = 20% */
}
.slideimg {
  width: 100%;
  height: 100%;
}

<div id="slidecontainer">
  <ul id="slide">
    <li>
      <img src="images/style.jpg" alt="1" class="slideimg" />
    </li>
    <li>
      <img src="images/style1.jpg" alt="2" class="slideimg" />
    </li>
    <li>
      <img src="images/style2.jpg" alt="3" class="slideimg" />
    </li>
    <li>
      <img src="images/style3.jpg" alt="4" class="slideimg" />
    </li>
  </ul>
</div>

请不要给出 jquery 解决方案，它需要是 Vanilla。

Answer 1

1。 100% 高度

如果您想将事物缩放到窗口高度的 100%，您需要确保足够(当使用 position: static 时)或全部 (当使用 position: relative 时)父元素也使用 100% 的高度。

在堆栈片段中，这意味着将这些规则添加到 html 和 body 以及您自己的所有元素中。

2。 100% 宽度

宽度要简单一些，因为每个 display: block 元素都会自动填满它的父元素。可以肯定的是，您可以向所有前面提到的元素添加一个 width: 100% 规则。

您的 css 存在的问题是，每个 float 相对于其父级的宽度为 25%，而父级的宽度仅为 100%。将其更改为 400%(幻灯片数量 * 100)，固定宽度。

这是全屏幻灯片的示例。注意:

• 如果我是你，我会用类选择器交换标签和 ID 选择器
• 我会在 ul 上使用 display: flex 并在 li 上使用 flex-grow: 1 s 而不是 float，但两者都可以。

html,
body,
#slidecontainer,
#slide,
li,
img {
  width: 100%;
  height: 100%;
}

* {
  margin: 0;
  padding: 0;
  position: relative; 
}

/* turn this rule on and scroll via js to slide */
#slidecontainer {
  /* overflow-x: hidden; */ 
} 

#slide {
  width: 400%; /* (100 * slideCount) */
}

li {
  float: left;
  width: 25%; /* (100 / slideCount) */
  
  list-style: none;
}

img { 
  display: block;
  background: #efefef; 
}

<div id="slidecontainer">
  <ul id="slide">
    <li>
      <img src="images/style.jpg" alt="1" class="slideimg" />
    </li>
    <li>
      <img src="images/style1.jpg" alt="2" class="slideimg" />
    </li>
    <li>
      <img src="images/style2.jpg" alt="3" class="slideimg" />
    </li>
    <li>
      <img src="images/style3.jpg" alt="4" class="slideimg" />
    </li>
  </ul>
</div>

---

奖励:没有 javascript

现在，只是为了好玩，这里有一个没有 javascript 的实现 :) 虽然改变幻灯片的数量是相当多的工作，所以我会采用混合方法或使用 css 预处理器来生成动画关键帧，如果我是你。 (仅在 chrome 中测试过)

html, body, #slidecontainer {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
} 

* {
  padding: 0;
  margin: 0;
  position: relative;
  box-sizing: border-box;
}

#slide {
  position: relative;
  width: 400%;
  height: 100%;
  display: flex;
  
  animation-duration: 7s;
  animation-name: slide;
  animation-iteration-count: infinite;
}

#slide > li {
  flex-grow: 1;
  list-style: none;
}

.slideimg {
  width: 100%;
  height: 100%;
}

@keyframes slide {
  0% {
    transform: translate3d(0, 0, 0); 
  }
  20% {
    transform: translate3d(0, 0, 0); 
  }
  25% {
    transform: translate3d(-25%, 0, 0); 
  }
  45% {
    transform: translate3d(-25%, 0, 0); 
  }
  50% {
    transform: translate3d(-50%, 0, 0); 
  }
  70% {
    transform: translate3d(-50%, 0, 0); 
  }
  75% {
    transform: translate3d(-75%, 0, 0); 
  }
  95% {
    transform: translate3d(-75%, 0, 0); 
  }
}

<div id="slidecontainer">
  <ul id="slide">
    <li style="background: green;">
      <img src="images/style.jpg" alt="1" class="slideimg" />
    </li>
    <li style="background: blue;">
      <img src="images/style1.jpg" alt="2" class="slideimg" />
    </li>
    <li style="background: yellow;">
      <img src="images/style2.jpg" alt="3" class="slideimg" />
    </li>
    <li style="background: red;">
      <img src="images/style3.jpg" alt="4" class="slideimg" />
    </li>
  </ul>
</div>