Слайдер изображений не работает в JavaScript / HTML - PullRequest
Новая
       2

Слайдер изображений не работает в JavaScript / HTML

2 голосов
/ 29 октября 2019

Привет, я пытаюсь добавить ползунок изображения в представлении моего небольшого веб-приложения, но он не работает должным образом.

Я имею в виду, что он показывает изображение в рамке, но когда я пытаюсь нажать кнопку «Назад / Далее», это ничего не делает.

Не могли бы вы мне помочь? 

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = x.length
  }
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex - 1].style.display = "block";
}
<!DOCTYPE html>
<html>
<title>W3.CSS</title>

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  .mySlides {
    display: none;
  }
</style>

<body>

  <h2 class="w3-center">Manual Slideshow</h2>

  <div class="w3-content w3-display-container">
    <img class="mySlides" src="img_snowtops.jpg" style="width:100%">
    <img class="mySlides" src="img_lights.jpg" style="width:100%">
    <img class="mySlides" src="img_mountains.jpg" style="width:100%">
    <img class="mySlides" src="img_forest.jpg" style="width:100%">

    <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
    <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>
  </div>
</body>

</html>

1 Ответ

0 голосов
/ 30 октября 2019

У вас есть некоторые синтаксические ошибки. Вы забыли пару точек с запятой, так что исправьте это, и остальная часть кода выглядит нормально.

Я также исправил часть кода Javascript.

Надеюсь, это поможет!

В основном проблема заключалась в том, что вы никогда не увеличивали или не уменьшали slideIndex. Вы бы только увеличили, если бы оно было меньше 0 или больше .length. Поэтому я вместо вызова n в качестве аргумента просто использовал slideIndex в функции showDivs(). 

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  slideIndex += n;
   showDivs();
}

function showDivs() {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (slideIndex > x.length) {
    slideIndex = 1;
  }
  if (slideIndex < 1) {
    slideIndex = x.length;
  }
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex - 1].style.display = "block";
  console.log(slideIndex - 1);
}
<!DOCTYPE html>
<html>
<title>W3.CSS</title>

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  .mySlides {
    display: none;
  }
</style>

<body>

  <h2 class="w3-center">Manual Slideshow</h2>

  <div class="w3-content w3-display-container">
    <img class="mySlides" style="width:100%; height: 100%; background-color: blue;">
    <img class="mySlides" style="width:100%; height: 100%; background-color: red;">
    <img class="mySlides" style="width:100%; height: 100%; background-color: green;">
    <img class="mySlides" style="width:100%; height: 100%; background-color: purple;">

    <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
    <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>
  </div>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...