Question

我正在尝试在正在处理的主页上进行带有幻灯片更改标题的图像幻灯片演示。我当时使用w3schools作为教程，并且在那里工作，但是当我将代码放入文本编辑器时，什么也没发生。没有渲染。我正在使用Atom并在其html预览屏幕中运行代码，并在浏览器中打开文件。我正在使用外部CSS和JavaScript文件，并使用css-grid进行布局。

这是我的HTML：

<div class="slideshow-container">

  <div class="mySlides fade">
    <img src="headerpark.jpg" style="width:100%">
    <div class="text">Caption One</div>
  </div>

  <div class="mySlides fade">
    <img src="headerpark2.jpg" style="width:100%">
    <div class="text">Caption Two</div>
  </div>

  <div class="mySlides fade">
    <img src="headerpark3.jpg" style="width:100%">
    <div class="text">Caption Three</div>
  </div>
</div>

我的CSS：

.mySlides {display: none}

.slideshow-container {
   grid-area: banner;
   height: auto;
   max-height: 100vh;
   position: relative;
   justify-self: stretch;
}

.slideshow-container img {
  vertical-align: middle;
}

.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

最后是我的JavaScript：

var slideIndex = 0;
showSlides(slideIndex);

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}
  slides[slideIndex-1].style.display = "block";
  setTimeout(showSlides, 5000);
}

Answer 1

您的代码看起来不错。尝试将其复制到在线IDE（如codepen.io）中，然后查看其是否有效。可能只是您的浏览器（仿真器？）。

Answer 2

它试图在存在幻灯片集合之前在第一张幻灯片上设置块，以确保在调用该行之前将幻灯片定义为未定义。

var slideIndex = 0;
showSlides(slideIndex);

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  console.log(slideIndex);
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}

  if( typeof slides[slideIndex-1] !== 'undefined') {
    slides[slideIndex-1].style.display = "block";
  }
  setTimeout(showSlides, 5000);
}

现在，如果您想成为一名鸽友，这是朋友创建的类的解决方案，因此您可以执行一些操作，例如使用时间等选项将其实例化或创建暂停。这两种解决方案都可以通过替换JS来与您的代码一起使用

class Slideshow {
  constructor({delay = 5000, selector} = {}) {
    this.delay = delay
    this.index = 0
    this.selector = selector
    this.timeoutRef = undefined
  }

  play() {
    console.log(this.index)
    const slides = document.querySelectorAll('.mySlides')
    slides.forEach(slide => slide.style.display = 'none')
    slides.item(this.index).style.display = 'block'
    this.index = this.index >= slides.length - 1 ? 0 : this.index + 1
    this.timeoutRef = setTimeout(this.play.bind(this), this.delay)
  }
}

const slideshow = new Slideshow({ selector: '.mySlides'})
slideshow.play()

主页横幅幻灯片放映不起作用

2 个答案: