这个静态的幻灯片打开时第一张不显示，如何能调整js代码使其显示？

源自：1-2 佛靠金装，人靠衣装 - html和css的关系

这个静态的幻灯片打开时第一张不显示，如何能调整js代码使其显示？

var slideIndex = 1;showSlides(slideIndex);

function plusSlides(n) { showSlides(slideIndex += n);}

function currentSlide(n) { showSlides(slideIndex = n);}

function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot");

if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) {slides[i].style.display = "none";}

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";

提问者：慕沐5175539 2024-06-29 15:01

个回答

寒星孤月

2024-09-04 15:45:19

var slideIndex = 0; // 从0开始索引，更符合JavaScript的数组索引习惯

// 初始显示第一张幻灯片
showSlides(slideIndex);

function plusSlides(n) {
showSlides(Math.max(0, Math.min(slideIndex + n, document.getElementsByClassName("mySlides").length - 1)));
};

function currentSlide(n) {
showSlides(Math.max(0, Math.min(n, document.getElementsByClassName("mySlides").length - 1)));
};

function showSlides(n) {
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
var maxIndex = slides.length - 1; // 获取最大索引值

// 更新slideIndex为有效范围内的值
slideIndex = Math.max(0, Math.min(n, maxIndex));

// 隐藏所有幻灯片
for (var i = 0; i <= maxIndex; i++) {
slides[i].style.display = "none";
};

// 移除所有点的激活状态
for (var i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
};

// 显示指定索引的幻灯片并激活对应的点
if (slides.length > 0) {
slides[slideIndex].style.display = "block";
if (dots.length > 0) {
dots[slideIndex].className += " active";
};
};
}

0