我的自动段落幻灯片不工作

Question

我遇到了一个问题，我的幻灯片容器中的段落没有显示。我试过将 JS 放在 body 结束标记的前面，还添加了 body onload = showSlides()。我觉得 display: none in CSS 正在阻止它，但我不知道。非常感谢任何帮助

// SLIDESHOW
var slideIndex = 0;

showSlides();
function showSlides() {
    var i;
    var slides = document.getElementByClassName("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";
    setInterval(showSlides, 2000);
    };

/* SLIDESHOW */


.facts {background-color: lightblue;
        position: relative;
        float: right;
        display: block;
        clear: both;
        margin-top: -34%;
        border-radius: 10%;
        text-align: center;
        overflow: visible;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 0
    }

.mySlides {
    display: none;
    padding: 5%;
    text-align: center;
    overflow: visible;
    margin: 0

}

<aside>
    <div class="facts">
    <h2>Facts about German language</h2>

    <div class="mySlides">
        <p style="width:100%">German is the 11th most widely spoken language in the world</p>
    </div>

    <div class="mySlides">
        <p>English and German share 60% of their vocabulary</p>
    </div>

    <div class="mySlides">
        <p>Besides Germany, German is the official language of both Austria and Liechtenstein and one of the official languages in Switzerland and Luxembourg</p>
    </div>
    
  </div>
  </aside>

Answer 1

您的代码有两个问题：

应该是getElementsByClassName
在 CSS 中 facts 你有 margin-top: -34%; 这使得你可以看到任何东西

// SLIDESHOW
var slideIndex = 0;


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";
    setInterval(showSlides, 2000);
    };
    
    showSlides();

/* SLIDESHOW */


.facts {
         background-color: lightblue;
        position: relative;
        float: right;
        display: block;
        clear: both;
       
        border-radius: 10%;
        text-align: center;
        overflow: visible;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 0
    }

.mySlides {
    display: none;
    padding: 5%;
    text-align: center;
    overflow: visible;
    margin: 0

}

<aside>
    <div class="facts">
    <h2>Facts about German language</h2>

    <div class="mySlides">
        <p style="width:100%">German is the 11th most widely spoken language in the world</p>
    </div>

    <div class="mySlides">
        <p>English and German share 60% of their vocabulary</p>
    </div>

    <div class="mySlides">
        <p>Besides Germany, German is the official language of both Austria and Liechtenstein and one of the official languages in Switzerland and Luxembourg</p>
    </div>
    
  </div>
  </aside>

我的自动段落幻灯片不工作

My automatic paragraph slideshow not working

html

javascript

css

slideshow