自动幻灯片不工作JavaScript

我目前正试图了解如何从W3Schools在JavaScript中创建幻灯片。手动幻灯片工作完美，但自动幻灯片不以任何方式工作。自动幻灯片不工作JavaScript

HTML：

<!DOCTYPE html> 

<html> 

<head> 
    <link rel="stylesheet" href="styles.css"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <script src="scripts.js"></script> 
</head> 

<body> 

    <div id="main_adverts"> 
     <img class="slide" src="images/imgslider1.jpg"/> 
     <img class="slide" src="images/imgslider2.jpg"/> 
     <img class="slide" src="images/imgslider3.jpg"/> 
    </div> 
</body> 
<html>

的JavaScript：

var myIndex = 0; 
carousel(); 

function carousel() { 
    var i; 
    var x = document.getElementsByClassName("slide"); 
    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 
}

CSS：

#main_adverts{ 
    width: 70%; 
    height: 70%; 
    position: absolute; 
    top: 20%; 
    left: 15%; 
    border: 1px solid black; 
} 

#main_adverts img{ 
    width: 100%; 
    height: 100%; 
    position: absolute; 
}

来源

2017-03-31 betamech

它是如何工作的？您是否在开发者控制台中遇到任何错误？ – j08691

没有错误。显示第一个图像，但没有任何转换。 – betamech

尝试将您的JavaScript移动到结束标签前的页面末尾 – j08691

对于任何人谁可能会遇到这样的未来。解决这一问题的最安全的方式来包装你的代码如下所示：

window.onload = function(){ 
    //Your code here 
}

通过这样做，无论在哪里你把你的JavaScript的HTML文件，它会等待执行，直到网页完全加载。

来源

2017-03-31 21:00:19 JasonONeillCTG

自动幻灯片不工作JavaScript

回答

相关问题