时间戳

首页 > 解决方案 > 如何使用 javascript 显示 div 幻灯片？

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

问题描述

在 html 中，div 幻灯片可以更改，但是当页面第一次加载时，没有任何视图这样在此处输入图像描述

在我单击按钮后，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>

标签： javascriptvue.jsslideshow

解决方案

鉴于您提供的代码，这些功能看起来应该可以正常工作。但是，假设它不起作用并且仅在按下按钮时才起作用，解决该问题的一种方法是使用在页面完全加载时单击按钮时触发的事件来初始化滑块

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

推荐阅读