爲什麼我的圖像在html中添加類名後不顯示？

我想創建一個使用html javascript或可能css的幻燈片。但由於某種原因一旦我添加類名稱，即mySlides，我的圖像不再顯示。script.js沒有做任何事情。爲什麼我的圖像在html中添加類名後不顯示？

這裏是我的HTML，很簡單：

<div class="mySlides"> 
    <img src="TheTailoryimg/IMG_3649.JPG"> 
    <img src="img2.JPG"> 
    <img src="TheTailoryimg/img1.tif"> 
</div>

，這裏是我的javascript，我添加了一個外部JS鏈接在這樣<script src="script.js"></script>

在這裏，HTML的頂部是我的JS：

var slideIndex = 0; 
carousel(); 

function carousel() { 
    var i; 
    var x = document.getElementsByClassName("mySlides"); 
    for (i = 0; i < x.length; i++) { 
     x[i].style.display = "none"; 
    } 
    slideIndex++; 
    if (slideIndex > x.length) { 
     slideIndex = 1 
    } 
    x[slideIndex-1].style.display = "block"; 
    setTimeout(carousel, 2000); // Change image every 2 seconds 
}

來源

2017-02-23 Kat

......那麼你的CSS是什麼樣子？ – Snowmonkey

您想將'.mySlides'應用於圖像標籤，而不是父級。 –

你的代碼想要的.mySlides一個對象，然後通過網頁上的所有.mySlides循環，隱藏它們，然後將它們顯示爲一個旋轉木馬。所以你想申請.mySlides到img標籤，而不是父母。

var slideIndex = 0; 
 
carousel(); 
 

 
function carousel() { 
 
    var i; 
 
    var x = document.getElementsByClassName("mySlides"); 
 
    for (i = 0; i < x.length; i++) { 
 
    x[i].style.display = "none"; 
 
    } 
 
    slideIndex++; 
 
    if (slideIndex > x.length) { 
 
    slideIndex = 1 
 
    } 
 
    x[slideIndex - 1].style.display = "block"; 
 
    setTimeout(carousel, 2000); // Change image every 2 seconds 
 
}

<div> 
 
    <img class="mySlides" src="http://kenwheeler.github.io/slick/img/fonz1.png"> 
 
    <img class="mySlides" src="http://www.star2.com/wp-content/uploads/2015/06/happy-days-770x470.jpg"> 
 
</div>

來源

2017-02-23 20:50:52

我以前試過，但它仍然不適合我。添加任何形式的「class =」後，什麼也沒有顯示 – Kat

@Kat你是什麼意思「它仍然不適合我」？我的演示是否工作？你期望發生什麼？ –

圖像不顯示在我的本地計算機上。你的演示效果很好。 – Kat

圖像會顯示出來我有你的代碼創建的片段內。

var slideIndex = 0; 
 
carousel(); 
 

 
function carousel() { 
 
    var i; 
 
    var x = document.getElementsByClassName("mySlides"); 
 
    for (i = 0; i < x.length; i++) { 
 
     x[i].style.display = "none"; 
 
    } 
 
    slideIndex++; 
 
    if (slideIndex > x.length) {slideIndex = 1} 
 
    x[slideIndex-1].style.display = "block"; 
 
    setTimeout(carousel, 2000); // Change image every 2 seconds 
 
}

<div class="mySlides"> 
 
      <img src="http://lorempixel.com/250/250/nature/1"> 
 
      <img src="http://lorempixel.com/250/250/nature/1"> 
 
      <img src="http://lorempixel.com/250/250/nature/1"> 
 
</div>

來源

2017-02-23 20:52:11 Niklas

嗨！謝謝！你有什麼想法，爲什麼添加類名不會顯示圖像？ – Kat

爲什麼我的圖像在html中添加類名後不顯示？

回答

相關問題