Question

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

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

解决的步骤：我玩过CSS，并改变了相对和绝对之间的位置风格。我已将width:100%;添加到div中。我为图像添加了一个额外的样式 - #slide li img {width:100%; height:100%};但似乎没有任何效果。如果#slide li img＆amp; #slide li＆amp; #slide的宽度/高度均为100％，然后第一个图像缩放到Javascript中设置的合并图像宽度和高度的100％，这会使其超出比例并且只会滑动一个图像。

我已经尝试使用document.getElementsByClassName在javascript中单独设置宽度/高度但是它仍然没有填充包含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）或所有时（使用时{} 1}}）父元素也使用100％的高度。

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

2。 100％宽度

宽度更容易一些，因为每个body元素都会自动填充其父元素。确定，您只需向前面提到的所有元素添加display: block规则。

您的css遇到的问题是，每个width: 100%相对于其父级的宽度为float，其宽度仅为25%。将其更改为100%（幻灯片数量* 100），可以修复宽度。

以下是全屏幻灯片的示例。注意：

如果我是你
我会使用400%上的display: flex和ul上的flex-grow: 1而不是浮点数，但两者都有效。

li

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; 
}

奖金：没有javascript

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

<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>

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); 
  }
}

为什么图像不能填充幻灯片容器，宽度为100％/高度

1 个答案:

1。 100％高度

2。 100％宽度

奖金：没有javascript