自动幻灯片[重复]答案

【问题标题】：Automatic slideahow [duplicate]自动幻灯片[重复]
【发布时间】：2021-05-08 12:23:34
【问题描述】：

我已经为此工作了一段时间，但我似乎无法让 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%
}

【问题讨论】：

您的<script></script> 块必须移动到轮播 HTML 之后，否则它将在您尝试选择的元素加载到 DOM 之前执行
@MadelineKallis 以后，请留意浏览器控制台中的错误。它应该显示一个错误“Uncaught TypeError: Cannot read property 'style' of undefined”。即使它对您没有帮助，但对于那些试图回答您的问题的人来说可能很有用。

标签： javascript css asp.net

【解决方案1】：

正如评论中提到的，您只需在幻灯片 HTML 之后移动您的 <script></script> 块（通常将它放在正文的最末端，就在结束 </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>

【讨论】：