javascript - 如何在网页中放置幻灯片？我使用了以下代码，但它不起作用

Question

我想创建一个幻灯片，其中包含 3 个图像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>

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

标签： javascripthtmljquerycss

Answer 1

也许你告诉过的那些其他类正在覆盖你的一些代码。

我刚刚向您的 div 添加了width和height属性banner__list，它运行良好。我还添加了一些边框颜色来显示图像确实在变化。

看：

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

<div role="list" class="banner__list w-dyn-items" style="width: 300px; height: 300px;">
  <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">
  </div>
  <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">
  </div>
  <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">
  </div>
  <span class="dot" style="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;" onclick="currentSlide(1)"></span>
  <span class="dot" style="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;" onclick="currentSlide(2)"></span>
  <span class="dot" style="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;" onclick="currentSlide(3)"></span>
</div>