javascript - 我该如何修复这个轮播？

Question

我无法弄清楚为什么这段代码不起作用。我将 w3 中的两个代码拼凑在一起，制作了一个带有按钮和指示器的自动轮播，您所在的幻灯片。有谁知道出了什么问题？它只有按钮工作。

var slideIndex = 1;
showDivs(slideIndex);

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

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("ad-img");
  var dots = document.getElementsByClassName("demo");
  if (n > x.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = x.length
  }
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace("w3-white", "");
  }
  x[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " w3-white";
}
var myIndex = 0;
carousel();

function carousel() {
  plusDivs(1)
  setTimeout(carousel, 4000); // Change image every 4 seconds
}

.mySlides {
  display: none
}

.w3-left,
.w3-right,
.w3-badge {
  cursor: pointer
}

.w3-badge {
  height: 13px;
  width: 13px;
  padding: 0
}

<div class="w3-container">
  <h2 class="w3-center">
    Check out these Sweet Deals!</h2>
</div>
<div class="w3-content w3-display-container" style="max-width:769px">
  {{banners:types=\Theater_769x300\;start=1;count=7;order=random}}
  <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
    <div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">
      ❮&lt;/div>
    <div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">
      ❯&lt;/div>
  </div>
</div>

标签： javascript