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

Question 1

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

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

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

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>

javascript jquery html css

2

Sophia 29 Окт 2019 в 22:05

Похоже, это полностью проблема JavaScript на стороне клиента, поэтому такие технологии, как asp.net и Visual Studio, не имеют отношения к этой проблеме. Я удалил ненужные теги и текст.

–

ADyson

30 Окт 2019 в 02:11

Ваш код работает: jsfiddle.net/6nfx4Lbp

–

Jon P

30 Окт 2019 в 03:59

Answer

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

Я также исправил часть кода 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>

0

enhzflep 30 Окт 2019 в 04:28

Не знаю, почему фоновый цвет не отображается... извините... но вы все равно можете посмотреть на консоль.

–

Andrei

30 Окт 2019 в 04:26

@enhzflep, в соответствии с переполнением стека: «Крошечные, тривиальные правки не приветствуются — постарайтесь значительно улучшить пост при редактировании, исправляя все обнаруженные проблемы».

–

Andrei

30 Окт 2019 в 04:34

Question 2

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

Я также исправил часть кода 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>

0

enhzflep 30 Окт 2019 в 04:28

Не знаю, почему фоновый цвет не отображается... извините... но вы все равно можете посмотреть на консоль.

–

Andrei

30 Окт 2019 в 04:26

@enhzflep, в соответствии с переполнением стека: «Крошечные, тривиальные правки не приветствуются — постарайтесь значительно улучшить пост при редактировании, исправляя все обнаруженные проблемы».

–

Andrei

30 Окт 2019 в 04:34

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

1 ответ

Похожие вопросы

Новые вопросы

javascript