javascript - 制作 Javascript 简单的幻灯片

Question

我正在尝试创建一个简单的幻灯片，但它似乎无法正常工作，有人知道我做错了什么吗？？

这是我的代码:

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>

提前致谢

Answer 1

请尝试此代码。
我已经实现了 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/