Домашняя страница Баннер Слайд-шоу не работает - PullRequest
Новая
       8

Домашняя страница Баннер Слайд-шоу не работает

0 голосов
/ 15 декабря 2018

Я пытаюсь создать слайд-шоу с измененными надписями на главной странице, над которой я работаю.Я использовал 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);
}

Ответы [ 2 ]

0 голосов
/ 15 декабря 2018

Он пытался установить блок на первом слайде до того, как существовала коллекция слайдов, чтобы убедиться, что слайды не являются неопределенными, прежде чем вызывать эту строку для исправления.это решение от друга, которое создает класс, чтобы вы могли делать такие вещи, как создавать его экземпляры с такими параметрами, как время, или создавать паузу.Оба решения работают с вашим кодом, просто заменив 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()
0 голосов
/ 15 декабря 2018

Ваш код выглядит нормально.Попробуйте скопировать его в интерактивную среду разработки, например codepen.io, и посмотрите, работает ли он.Это может быть просто ваш браузер (эмулятор?).

...