如何使用 javascript 显示 div 幻灯片？答案

【问题标题】：How to show div slideshow using javascript?如何使用 javascript 显示 div 幻灯片？
【发布时间】：2020-07-15 16:48:22
【问题描述】：

在 html 中，div 幻灯片可以更改，但是当页面第一次加载时，没有任何视图作为 this

单击按钮后，div 显示为

知道如何在不点击按钮的情况下显示第一个 div 吗？

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(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";
}

<div class="row">
  <div class="col-xs-1">
    <button style="margin-top:70px" onclick="plusDivs(-1)">&#10094;</button>
  </div>
  <div class="col-xs-10">
    <div class="mySlides" v-for="review in reviews">
      <div class="row">
        <div class="col">
          <div class="card">
            <div class="card-body" style="padding:0px">
              <h5 class="card-title text-warning">{{review.name}}</h5>
              <p style="text-align:justify">{{review.review}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-xs-1">
    <button style="margin-top:80px" onclick="plusDivs(1)">&#10095;</button>
  </div>
</div>

【问题讨论】：

也许设置一个代码 sn-p（带有完整代码）以便我们可以准确评估手头的问题？如果没有这个，我唯一的猜测是在初始幻灯片上设置display: block;，或者在页面加载时调用showDivs(0)

标签： javascript vue.js slideshow

【解决方案1】：

鉴于您提供的代码，这些功能看起来应该可以正常工作。但是，假设它不起作用且仅在按下按钮时才起作用，解决此问题的一种方法是使用page is fully loaded page is fully loaded

时单击按钮时触发的事件来初始化滑块

window.addEventListener('load', (event) => {
    plusDivs(1);
});

【讨论】：