Question

我正在尝试使用W3.CSS Slideshow部分＆＃34;幻灯片指示＆＃34;。

但是我需要使用JS动态创建上一个和下一个按钮。

但由于某种原因，prev和next按钮不起作用..！（没有发生任何事情）

这是我的代码：

HTML代码：

    <title>Pre:D</title>
    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
    <script src="script.js"></script>
</head>

<body>

    <div class="w3-row-padding" style = "width: 800px" id="form">

        <div class="mySlides">First Slide</div>

        <div class="mySlides">Second Slide</div>

        <div class="mySlides">Third Slide</div>

    </div>

    <div id="toggle" class="w3-center" style = "width: 800px">

    </div>

</body>

Js代码：

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

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

 function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("mySlides");
    //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";
    }

    x[slideIndex-1].style.display = "block";

  }

window.onload=function(){


  var dump = document.getElementById("toggle");

  var sec = document.createElement("div");
  sec.className = "w3-section";

  var prev = document.createElement("button");
  prev.className = "w3-btn";
  prev.addEventListener("click", plusDivs(-1));
  prev.innerHTML = "Previous";

  var next = document.createElement("button");
  next.className = "w3-btn";
  next.addEventListener("click", plusDivs(1));
  next.innerHTML = "Next";

  sec.appendChild(prev);
  sec.appendChild(next);

  dump.appendChild(sec);

  showDivs(slideIndex);

};

当在html文件中创建按钮时，按钮正常工作，但是一旦我使用js创建了它们，它们就被创建了但是onclick函数不起作用..

Answer 1

如果传递参数，请将其绑定为prev.addEventListener("click", function() { plusDivs(-1) });

以下是一个示例：

var slideIndex = 1;

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(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";
}

window.onload = function() {
  var dump = document.getElementById("toggle");
  var sec = document.createElement("div");
  sec.className = "w3-section";

  var prev = document.createElement("button");
  prev.className = "w3-btn";
  prev.addEventListener("click", function() {
    plusDivs(-1)
  });
  prev.innerHTML = "Previous";

  var next = document.createElement("button");
  next.className = "w3-btn";
  next.addEventListener("click", function() {
    plusDivs(1)
  });
  next.innerHTML = "Next";

  sec.appendChild(prev);
  sec.appendChild(next);
  dump.appendChild(sec);
  showDivs(slideIndex);
};

<link href="http://www.w3schools.com/lib/w3.css" rel="stylesheet" />

<div class="w3-row-padding" style="width: 800px" id="form">

  <div class="mySlides">First Slide</div>
  <div class="mySlides">Second Slide</div>
  <div class="mySlides">Third Slide</div>

</div>

<div id="toggle" class="w3-center" style="width: 800px">
</div>

JS onclick没有执行幻灯片放映

1 个答案: