使用 JavaScript 的幻灯片放映

Question

我是 javascript 的新人，所以这是我的问题。我正在使用 html css 和 javaScript 制作三张图片的幻灯片。但它总是从第二张图片开始。

这是我的代码：

var slideIndex=0;
window.onload=showSlides;
showSlides();

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

Answer 1

1) 您对函数的使用不正确。你用了两次：

window.onload=showSlides;
showSlides();

改为使用其中之一。

2) 每当函数执行时，它可能会跳转到第二张图片。如果是这样，只需从 -1 起始索引开始，而不是 0.

使用 JavaScript 的幻灯片放映

Slideshow using JavaScript

javascript

onload

slideshow