Создание простого слайд-шоу Javascript - PullRequest
Новая
       7

Создание простого слайд-шоу Javascript

0 голосов
/ 18 октября 2018

Я пытаюсь создать простое слайд-шоу, но, похоже, оно не работает правильно, кто-нибудь знает, что я сделал не так ?? *

Вот мой код: 

var img = document.getElementsByTagName('img');
index = 0;
for (j = 0; j < img.length; j++) {
  img[j].style.display = 'none';
}

function slider() {
  if (index < img.length) {
    img[index - 1].style.display = 'none';
    img[index].style.display = 'block';
    index++;
  } else {
    img[index - 1].style.display = 'none';
    img[index].style.display = 'block';
    index = 0;
  }
}
slider();
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<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="slider()">&#10094;</button>
  <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>
</div>

Заранее спасибо

1 Ответ

0 голосов
/ 18 октября 2018

Пожалуйста, попробуйте этот код.
Я реализовал функции slider и plusDivs.Я надеюсь, что этот вывод - ваш ожидаемый результат.

html: 

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="w3-content w3-display-container">
  <img class="mySlides" src="https://dummyimage.com/600x400/000/fff&text=1" style="width:100%">
  <img class="mySlides" src="https://dummyimage.com/600x400/000/fff&text=2" style="width:100%">
  <img class="mySlides" src="https://dummyimage.com/600x400/000/fff&text=3" style="width:100%">
  <img class="mySlides" src="https://dummyimage.com/600x400/000/fff&text=4" style="width:100%">

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

js: 

var img = document.getElementsByTagName('img');
index = 0;
for (j = 1; j < img.length; j++) {
  img[j].style.display = 'none';
}

function slider() {
  img[index].style.display = 'none';

  index--;
  if (index < 0) {
    index = img.length - 1;
  }
  img[index].style.display = 'block';
}

function plusDivs() {
  img[index].style.display = 'none';

  index++;
  if (index > img.length - 1) {
    index = 0
  }
  img[index].style.display = 'block';
}

JSFiddle: https://jsfiddle.net/kuromoka/hn4wm1be/

...