Question

我正在尝试创建一个基本图像滑块，只是自动滑过div中放置的任意数量的图像。

HTML

<head>
    <script type="text/javascript" src="slider.js"></script>
</head>

<div class="images">
        <img class="slides" src="img01.jpg">
        <img class="slides" src="img02.jpg">            
        <img class="slides" src="img03.jpg">        
        <img class="slides" src="img04.jpg">    
</div>

的JavaScript

var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("slides");
    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, 2000); // Change image every 2 seconds
}

但此刻，似乎这段代码根本没有做任何事情，这是页面的当前输出。

正如您所看到的，图像只是叠加在一个图像上，而不是以幻灯片形式播放。

Answer 1

您在呈现HTML之前重新加载脚本，因此当它尝试getElementsByClassName时，找不到任何内容。尝试转到HTML下方。在上面的评论中，您在定义之前调用了函数carousel()。将该行移动到函数定义下面。

此外，您可以使用

<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        // all of your JavaScript goes here
    });
</script>

这只会在加载HTML后加载你的JavaScript，你可以把它留在头脑中。

Answer 2

放入旋转木马（）;在html之后调用。这样，在加载html之前不会调用javascript。

Answer 3

加载图像后没有调用carousel方法。您可以在javascript文件＆＃34; slider.js＆＃34;

中执行以下操作

window.onload = function() { casousel(); };

这会在窗口加载时调用轮播功能。

为什么我的.js文件似乎没有对我的.html文件做任何事情？

3 个答案: