Question

我创建了一个自动幻灯片放映，该幻灯片应每2秒更改一次图片；我首先调用函数changeSlide（），然后应使用setTimeout函数递归调用自身。但这在第一次启动页面或刷新页面时不起作用。

但是当我单击按钮时它开始工作。

let slideIndex = 0;

    changeSlide();

    function changeSlide(){             
        slideIndex++;

        let images = document.getElementsByClassName('image');      
        for (let i = 0; i<images.length;i++){
            images[i].style.display="none";
        }

        if (slideIndex>= images.length){
            slideIndex = 0;
        }

        images[slideIndex].style.display = "block"; 
        setTimeout(changeSlide,2000);

    }

这是我的html代码。

<div class="w3-display-container w3-content">
        <img class="image" src="city.jpg" style="width: 100%;height:500px;" >
        <img class="image" src="profile.png" style="width: 100%; height:500px;display:none;" >
        <img class="image" src="img_girl.jpg" style="width: 100%;height:500px; display:none;" >

    </div>
    <button onClick="changeSlide()">Click Me</button>

我希望我的幻灯片在开始我的页面后立即开始。

Answer 1

以这种方式代替changeSlide();来进行window.onload=changeSlide;的操作，即可以确保在调用函数时DOM存在

Answer 2

您当前似乎没有任何代码可以告诉您的页面在该函数加载时运行该函数。尝试将以下内容添加到您的body标签：

<body onload="changeSlide()">
    <!-- your other HTML code here -->
</body>

Answer 3

当浏览器解析HTML标记后，您应该调用changeSlide，以便它可以访问HTML元素。您有一些选择可以使其正常工作。

将JS代码放在HTML标记之后（在包含图像的<div>元素之后）。或者在其后致电changeSlide：

<script>
    let slideIndex = 0;
    function changeSlide(){
        ...
    }
</script>

<div class="w3-display-container w3-content">
    ...
</div>

<script>
    changeSlide();
</script>

使用changeSlide事件在页面加载后运行DOMContentLoaded：

window.addEventListener('DOMContentLoaded', function(event){
    changeSlide();
});

// Or just:

window.addEventListener('DOMContentLoaded', changeSlide);

脚本标签内的调用函数不起作用

3 个答案: