时间戳

首页 > 解决方案 > 自动幻灯片

javascript - 自动幻灯片

问题描述

我已经为此工作了一段时间，但我似乎无法让 javascript 触发 for 循环工作。我一直在使用 w3Schools 作为参考，并且做了很多研究，但仍然是空的。如果有人有任何见解或替代方法，请告诉我。

aspx 侧

<style>
        .mySlides {
            display: none;
        }
</style>

<script>
        var myIndex = 0;
        carousel();

        function carousel() {
            var i;
            var x = document.getElementsByClassName("mySlides");
            for (i = 0; i < x.length; i++) {
                x[i].style.display = "none";
            }
            myIndex++;
            if (myIndex > x.length) { myIndex = 1 }
            x[myIndex - 1].style.display = "block";
            setTimeout(carousel, 10000); // Change image every 10 seconds
        }
    </script>

        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="content section" style="max-width: 100%;">
                    <img class="mySlides" src="img/personel.png" style="width: 100%; height: 800px" />
                    <img class="mySlides" src="img/integration.png" style="width: 100%; height: 800px" />
                    <img class="mySlides" src="img/tech_background.png" style="width: 100%; height: 800px" />
                </div>
            </div>
        </div>

CSS

.content {
    max-width: 980px
}

.section, .code {
    margin-top: 16px !important;
    margin-bottom: 16px !important
}
.code, .codespan {
    font-family: Consolas,"courier new";
    font-size: 16px
}

.code {
    width: auto;
    background-color: #fff;
    padding: 8px 12px;
    border-left: 4px solid #4CAF50;
    word-wrap: break-word
}

.codespan {
    color: crimson;
    background-color: #f1f1f1;
    padding-left: 4px;
    padding-right: 4px;
    font-size: 110%
}

标签： javascriptcssasp.net

解决方案

如评论中所述，您只需<script></script>在幻灯片 HTML 之后移动块（通常将其放在正文的最末端，就在 close 之前</body>），以便在您尝试选择的元素加载后执行进入 DOM：

.content {
  max-width: 980px
}

.section,
.code {
  margin-top: 16px !important;
  margin-bottom: 16px !important
}

.code,
.codespan {
  font-family: Consolas, "courier new";
  font-size: 16px
}

.code {
  width: auto;
  background-color: #fff;
  padding: 8px 12px;
  border-left: 4px solid #4CAF50;
  word-wrap: break-word
}

.codespan {
  color: crimson;
  background-color: #f1f1f1;
  padding-left: 4px;
  padding-right: 4px;
  font-size: 110%
}
<style>
  .mySlides {
    display: none;
  }
</style>

<div class="row">
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <div class="content section" style="max-width: 100%;">
      <img class="mySlides" alt="personel" src="img/personel.png" style="width: 100%; height: 800px" />
      <img class="mySlides" alt="integration" src="img/integration.png" style="width: 100%; height: 800px" />
      <img class="mySlides" alt="tech_background" src="img/tech_background.png" style="width: 100%; height: 800px" />
    </div>
  </div>
</div>

<script>
  var myIndex = 0;
  carousel();

  function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";
    }
    myIndex++;
    if (myIndex > x.length) {
      myIndex = 1
    }
    x[myIndex - 1].style.display = "block";
    setTimeout(carousel, 10000); // Change image every 10 seconds
  }
</script>

推荐阅读