制作Javascript简单幻灯片

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

这是我的密码：

var img=document.getElementsByTagName（'img'）；
指数=0；
对于（j=0；j

❮
❯
请尝试此代码。

我已经实现了
slider
和
plusDivs
功能。我希望这是你的预期结果

html:


❮
❯

js:

var img=document.getElementsByTagName（'img'）；
指数=0；
对于（j=1；jimg.length-1）{
索引=0
}
img[index].style.display='block'；
}

jsIDLE:
调用slider（）时，index=0和img[index-1]不起作用。
<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>

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';
}