如何将幻灯片放映到网页中？我使用了以下代码但它不起作用

Question

我想在一个div. 幻灯片将出现在网页左上角的某个位置。网页中还有其他 div 和功能。

我在 div 中使用了这段代码来进行幻灯片放映。我主要使用内联样式。其余类仅用于 div 的定位和大小。

var slideIndex = 1;

showSlides(slideIndex);

function plusSlides(n) {

  showSlides(slideIndex += n);

}

function currentSlide(n) {

  showSlides(slideIndex = n);

}

function showSlides(n) {

  var i;

  var slides = document.getElementsByClassName("mySlides");

  var dots = document.getElementsByClassName("dot");

  if (n > slides.length) {

    slideIndex = 1

  }

  if (n < 1) {

    slideIndex = slides.length

  }

  for (i = 0; i < slides.length; i++) {

    slides[i].style.display = "none";

  }

  for (i = 0; i < dots.length; i++) {

    dots[i].className = dots[i].className.replace(" active", "");

  }

  slides[slideIndex - 1].style.display = "block";

  dots[slideIndex - 1].className += " active";

}

.dot {

  cursor: pointer;

  height: 15px;

  width: 15px;

  margin: 0 2px;

  background-color: #bbb;

  border-radius: 50%;

  display: inline-block;

  transition: background-color 0.6s ease;

  float: left;

  text-align: center;

}

<div role="list" class="banner__list w-dyn-items">

  <div style="background-image:url(/frontEnd/5a10aaa4d85f4b0001a5419a_2017-lamborghini-huracan-spyder-orange-exterior-front-angle-royalty-exotic-cars.jpg)" role="listitem" class="banner__item w-dyn-item mySlides">

  </div>

  <div style="background-image:url(/frontEnd/5a10aaa4d85f4b0001a541d8_2015-bentley-continental-gtc-red-car-hero-2-image-royalty-exotic-cars.jpg)" role="listitem" class="banner__item w-dyn-item mySlides">

  </div>

  <div style="background-image:url(/frontEnd/5abda7fc38a916291e1647d3_2018-jeep-wrangler-white-isolated-front-angle-royalty-exotic-cars.jpg)" role="listitem" class="banner__item w-dyn-item mySlides">

  </div>

  <span class="dot" onclick="currentSlide(1)"></span>

  <span class="dot" onclick="currentSlide(2)"></span>

  <span class="dot" onclick="currentSlide(3)"></span>

</div>

这些点甚至没有出现。第一张图片仅出现。这里有什么问题吗？

Answer 1

幻灯片放映有效，您只是看不到图像，因为它们是背景图像，并且没有样式或内容，divs 具有0px宽度和高度。正确显示图像的设置：.banner__item {&nbsp; width:50px;&nbsp; height:50px;}附带说明一下，如果您将这些图像作为实际img标签放在 HTML 中，则无需指定宽度和高度。这具有允许您使用该alt属性的额外好处，从而提高了可访问性。此外，内联样式可能会让人头疼。通过类应用样式可以清理标记，从长远来看更易于维护。与内联样式一起，内联 JS 也会引起头痛。您可以将内联onClick处理程序移动到事件侦听器中，以使标记更清晰。在代码片段中，我添加了监听器：window.addEventListener("click", currentSlide);为了解释点击侦听器，而不是传递我查找的索引：function currentSlide(event) {&nbsp; const dots = document.getElementsByClassName("dot");&nbsp; const clickIndex = Array.from(dots).indexOf(event.target);&nbsp; showSlides(clickIndex);}我还修改了 showSlides 逻辑以仅使用基于 0 的数组，而不是从传入的整数中减去 1。希望它仍然对您有用！:)如果你想居中，这些天我通常会使用flexbox！您可以在这个 codepen中看到它与您的使用方式一起工作，或者在下面的代码片段中进行建议的更改：showSlides(0);function plusSlides(n) {&nbsp; showSlides(slideIndex += n);}function currentSlide(event) {&nbsp; const dots = document.getElementsByClassName("dot");&nbsp; const clickIndex = Array.from(dots).indexOf(event.target);&nbsp; showSlides(clickIndex);}function showSlides(slideIndex) {&nbsp; var i;&nbsp; var slides = document.getElementsByClassName("mySlides");&nbsp; var dots = document.getElementsByClassName("dot");for (i = 0; i < slides.length; i++) {&nbsp; &nbsp; slides[i].style.display = "none";&nbsp; }&nbsp; for (i = 0; i < dots.length; i++) {&nbsp; &nbsp; dots[i].className = dots[i].className.replace(" active", "");&nbsp; }&nbsp; slides[slideIndex].style.display = "block";&nbsp; dots[slideIndex].className += " active";}window.addEventListener("click", currentSlide);.dot {&nbsp; cursor: pointer;&nbsp; height: 15px;&nbsp; width: 15px;&nbsp; margin: 0 2px;&nbsp; background-color: #bbb;&nbsp; border-radius: 50%;&nbsp; display: inline-block;&nbsp; transition: background-color 0.6s ease;&nbsp; float: left;&nbsp; text-align: center;}.banner__list {&nbsp; width: 100px;}.banner__item {&nbsp; width: 100%;&nbsp; margin: 0 auto;&nbsp; text-align: center;}.banner__list {&nbsp; display: flex;&nbsp; flex-wrap: wrap;&nbsp; justify-content: center;}<div role="list" class="banner__list w-dyn-items">&nbsp; <div role="listitem" class="banner__item w-dyn-item mySlides">&nbsp; &nbsp; <img src="http://placehold.it/50/bada55" alt="green square" />&nbsp; </div>&nbsp; <div role="listitem" class="banner__item w-dyn-item mySlides">&nbsp; &nbsp; <img src="http://placehold.it/50/990000" alt="red square" />&nbsp; </div>&nbsp; <div role="listitem" class="banner__item w-dyn-item mySlides">&nbsp; &nbsp; <img src="http://placehold.it/50/000099" alt="blue square" />&nbsp; </div>&nbsp; <span class="dot"></span>&nbsp; <span class="dot"></span>&nbsp; <span class="dot"></span></div>

Answer 2

也许您提到的那些其他类正在覆盖您的一些代码。我刚刚向您的 div 添加了属性width并且效果很好。我还添加了一些边框颜色以显示图像确实在变化。heightbanner__list看：var slideIndex = 1;showSlides(slideIndex);function plusSlides(n) {&nbsp; showSlides(slideIndex += n);}function currentSlide(n) {&nbsp; showSlides(slideIndex = n);}function showSlides(n) {&nbsp; var i;&nbsp; var slides = document.getElementsByClassName("mySlides");&nbsp; var dots = document.getElementsByClassName("dot");&nbsp; if (n > slides.length) {&nbsp; &nbsp; slideIndex = 1&nbsp; }&nbsp; if (n < 1) {&nbsp; &nbsp; slideIndex = slides.length&nbsp; }&nbsp; for (i = 0; i < slides.length; i++) {&nbsp; &nbsp; slides[i].style.display = "none";&nbsp; }&nbsp; for (i = 0; i < dots.length; i++) {&nbsp; &nbsp; dots[i].className = dots[i].className.replace(" active", "");&nbsp; }&nbsp; slides[slideIndex - 1].style.display = "block";&nbsp; dots[slideIndex - 1].className += " active";}<div role="list" class="banner__list w-dyn-items" style="width: 300px; height: 300px;">&nbsp; <div style="border: 3px solid red; background-image:url(https://via.placeholder.com/300); width: 100%; height: 100%;" role="listitem" class="banner__item w-dyn-item mySlides">&nbsp; </div>&nbsp; <div style="border: 3px solid green; background-image:url(https://via.placeholder.com/300); width: 100%; height: 100%;" role="listitem" class="banner__item w-dyn-item mySlides">&nbsp; </div>&nbsp; <div style="border: 3px solid blue; background-image:url(https://via.placeholder.com/300); width: 100%; height: 100%;" role="listitem" class="banner__item w-dyn-item mySlides">&nbsp; </div>&nbsp; <span class="dot" style="cursor: pointer;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;height: 15px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;width: 15px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;margin: 0 2px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;background-color: #bbb;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;border-radius: 50%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;display: inline-block;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;transition: background-color 0.6s ease;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;float:left;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;text-align:center;" onclick="currentSlide(1)"></span>&nbsp; <span class="dot" style="cursor: pointer;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;height: 15px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;width: 15px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;margin: 0 2px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;background-color: #bbb;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;border-radius: 50%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;display: inline-block;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;transition: background-color 0.6s ease;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;float:left;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;text-align:center;" onclick="currentSlide(2)"></span>&nbsp; <span class="dot" style="cursor: pointer;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;height: 15px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;width: 15px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;margin: 0 2px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;background-color: #bbb;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;border-radius: 50%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;display: inline-block;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;transition: background-color 0.6s ease;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;float:left;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;text-align:center;" onclick="currentSlide(3)"></span></div>

Answer 3

你可以试试 Twitter 的 Bootstrap。它有一个幻灯片组件。将此添加到您的样式中：<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">这是示例模板：<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">&nbsp; <ol class="carousel-indicators">&nbsp; &nbsp; <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>&nbsp; &nbsp; <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>&nbsp; &nbsp; <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>&nbsp; </ol>&nbsp; <div class="carousel-inner">&nbsp; &nbsp; <div class="carousel-item active">&nbsp; &nbsp; &nbsp; <img class="d-block w-100" src="[IMAGE-1-SOURCE]" alt="First slide">&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="carousel-item">&nbsp; &nbsp; &nbsp; <img class="d-block w-100" src="[IMAGE-2-SOURCE]" alt="Second slide">&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="carousel-item">&nbsp; &nbsp; &nbsp; <img class="d-block w-100" src="[IMAGE-3-SOURCE]" alt="Third slide">&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">&nbsp; &nbsp; <span class="carousel-control-prev-icon" aria-hidden="true"></span>&nbsp; &nbsp; <span class="sr-only">Previous</span>&nbsp; </a>&nbsp; <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">&nbsp; &nbsp; <span class="carousel-control-next-icon" aria-hidden="true"></span>&nbsp; &nbsp; <span class="sr-only">Next</span>&nbsp; </a></div>