自動スライドショーが動作しない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 
}

そうすることで、関係なく、あなたがHTMLファイルで、あなたのJavaScriptを置く場所の、それが実行するために待機します：以下は次のようにこの問題を解決するための最も安全な方法は、あなたのコードをラップすることです。

出典

2017-03-31 21:00:19 JasonONeillCTG

自動スライドショーが動作しないJavaScript

答えて

関連する問題