Блог

Итак, я пытаюсь создать простое слайд-шоу, но по какой-то причине изображения накладываются друг на друга. Кто-нибудь может помочь? Я перепробовал все, и, похоже, ничего не изменилось. Я думаю, что, возможно, я что-то перепутал в HTML или в javascript. Изображения отображаются друг над другом, а не в формате слайд-шоу, но точки все еще появляются внизу, а стрелки все еще находятся на одном из изображений
Html:

 <div class="container">
<div class="mySlides">
<div class="numberText">1 / 2</div>
<img src="images/newReleases.png" style="width:100%">
</div>

<div class="mySlides">
<div class="numberText"> 2 / 2</div>
<img src="images/bestSeller.png" style="width:100%">
</div>

<a class="prev" onclick="plusSlides(-1)">amp;#10094;</a>
<a class="next" onclick="plusSlides(1)">amp;#10095;</a>
</div>

<br>

<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
</div>
 

CSS:

 .container{
width: 100%;
position: absolute;
margin: auto;
}

.next, .prev{
cursor: pointer;
position: absolute;
top:50%;
width: auto;
padding: 15px;
margin-top: -20px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.5s ease;
border-radius: 0px 2px 2px 0px;
}

.next{
right: 0;
border-radius: 2px 0px 0px 2px;
}

.numbertext{
color: #ffffff;
font-size: 16px;
padding: 12px 12px;
position: absoulte;
top: 0;
}

.dot{
cursor: pointer;
height: 20px;
width: 20px;
margin: 0px 3px;
background-color: #ee985b;
border-radius: 50%;
display: inline-block;
transition: background-color 0.5s ease;
}

.active, .dot:hover{
background-color: #f6f46c;
}
 

JS:

     var slideIndex = 0;
showSlides();

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

Вам нужно исправить ваш javascript, который должен быть document.getElementsByClassName("mySlides") , и ваш var slides , который должен быть slides.length .

 var slideIndex = 0;
showSlides();

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

 .container {
  width: 100%;
  position: absolute;
  margin: auto;
}

.next,
.prev {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 15px;
  margin-top: -20px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.5s ease;
  border-radius: 0px 2px 2px 0px;
}

.next {
  right: 0;
  border-radius: 2px 0px 0px 2px;
}

.numbertext {
  color: #ffffff;
  font-size: 16px;
  padding: 12px 12px;
  position: absoulte;
  top: 0;
}

.dot {
  cursor: pointer;
  height: 20px;
  width: 20px;
  margin: 0px 3px;
  background-color: #ee985b;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.5s ease;
}

.active,
.dot:hover {
  background-color: #f6f46c;
} 

 <div class="container">
  <div class="mySlides">
    <div class="numberText">1 / 2</div>
    <img src="images/newReleases.png" style="width:100%">
  </div>

  <div class="mySlides">
    <div class="numberText"> 2 / 2</div>
    <img src="images/bestSeller.png" style="width:100%">
  </div>

  <a class="prev" onclick="plusSlides(-1)">amp;#10094;</a>
  <a class="next" onclick="plusSlides(1)">amp;#10095;</a>
</div>

<br>

<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
</div> 

Пункт 1: вы используете getElementByClassName вместо getElementsBysClassName

Пункт 2: В вашем цикле for вы используете slide.length вместо slides.length , потому что слайды имеют значение slides variable

Пункт 3: В зависимости от вашего условия if, которое вы используете повторно slide.length , а slides.length не потому, что слайды имеют значение slides variable

Пункт 4: slide[slideIndex - 1].style.display = "block"; вместо slides[slideIndex - 1].style.display = "block"; того, чтобы потому, что слайды установлены в slides переменную