自動スライドショーが動作しません

Question

私はHTMLページにスライドショーを持ち、W3サイトでhtml/javascriptコードを見つけてコピーしました。しかし、それは動作しません。私が得たのは、リストとして表示された3つの画像だけでした。私は主題についてここに与えられたいくつかのanwsersを見てきましたが、それでも私は問題が何かを見つけることができません。私は、コードが完成して、行く準備ができていると思った。だから私はいくつかの助けが必要です。 コードは以下の通りです：

javascriptの //自動スライドショー - 変化画像ごとに3秒 VAR slideIndex = 0; showSlides（）;

function showSlides() { 
    var i; 
    var slides = document.getElementsByClassName("mySlides"); 
    for (i = 0; i < slides.length; i++) { 
     slides[i].style.display = "none"; 
    } 
    slideIndex++; 
    if (slideIndex> slides.length) {slideIndex = 1} 
    slides[slideIndex-1].style.display = "block"; 
    setTimeout(showSlides, 3000); 
} 
the html 
<!-- Slide Show section showing 3 img every 3 sec--> 
    <div class="slideshow-container"> 
    <div class="mySlides fade"> 
    <img class="mySlides" src="../images/Icons/sa.png" alt="a" 
    style="width:100%"> 
    </div> 
    <div class="mySlides fade"> 
    <img class="mySlides" src="../images/images/b.jpg" alt="b" 
    style="width:100%" > 
    </div> 
    <div class="mySlides fade"> 
    <img class="mySlides" src="../images/images 
    /c.jpg" alt="c"     
    style="width:100%"> 
    </div> 

Answer 1

CSSが必要なのは、スタイリングが機能する上で大きな部分を占めることです。

http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto

<style> 
* {box-sizing:border-box} 
body {font-family: Verdana,sans-serif;} 

/* Slideshow container */ 
.slideshow-container { 
    max-width: 1000px; 
    position: relative; 
    margin: auto; 
} 

/* Caption text */ 
.text { 
    color: #f2f2f2; 
    font-size: 15px; 
    padding: 8px 12px; 
    position: absolute; 
    bottom: 8px; 
    width: 100%; 
    text-align: center; 
} 

/* Number text (1/3 etc) */ 
.numbertext { 
    color: #f2f2f2; 
    font-size: 12px; 
    padding: 8px 12px; 
    position: absolute; 
    top: 0; 
} 

/* The dots/bullets/indicators */ 
.dot { 
    height: 13px; 
    width: 13px; 
    margin: 0 2px; 
    background-color: #bbb; 
    border-radius: 50%; 
    display: inline-block; 
    transition: background-color 0.6s ease; 
} 

.active { 
    background-color: #717171; 
} 

/* Fading animation */ 
.fade { 
    -webkit-animation-name: fade; 
    -webkit-animation-duration: 1.5s; 
    animation-name: fade; 
    animation-duration: 1.5s; 
} 

@-webkit-keyframes fade { 
    from {opacity: .4} 
    to {opacity: 1} 
} 

@keyframes fade { 
    from {opacity: .4} 
    to {opacity: 1} 
} 

/* On smaller screens, decrease text size */ 
@media only screen and (max-width: 300px) { 
    .text {font-size: 11px} 
} 
</style> 

Answer 2

あなたのコードとの唯一の問題は、あなたの<img>タグからclass="mySlides"を削除し、あなたが<img>と<div>タグの同じクラスを持っていることであり、あなたのスライダーは以下となります。ここでは完全なコードへのリンクですうまくできた。

Answer 3

私が提案したように、元のコードを新しいhtmlファイルにコピーして実行しましたが、全く動作しません。私はコンテナの幅を変更して、何の応答も全くないかどうかを調べようとしました。すべての画像が元のサイズでリストに表示されます。非常に奇妙な。もう少しお勧めしますか？