我正在介绍 javaScript/jQuery 类,并且必须制作一个标题幻灯片,我无法让它工作,你能看看我可能犯了什么错误吗?我走到了死胡同,感觉就像我的头撞在墙上。它说我需要添加更多不是代码的输入,所以我在这里输入更多。请随时提出任何澄清问题,
"use strict";
$(document).ready( () => {
let nextSlide = $("#slides img:first-child");
setInterval( () => {
$("#caption").fadeOut(2000);
$("#slide").fadeOut(2000,
() => {
if (nextSlide.next().length == 0) {
nextSlide = $("#slides img:first-child");
}
else {
nextSlide = nextSlide.next();
}
const nextSlideSource = nextSlide.attr("src");
const nextCaption = nextSlide.attr("alt");
$("#slide").attr("src", nextSlideSource).fadeIn(1000);
$("#caption").text(nextCaption).fadeIn(1000);
}); // end fadeOut()
},
1000); // end setInterval()
});
#slides img {
display: none;
}
#slide {
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>SlideShow</title>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
<script src="slide_show.js"></script>
</head>
<body>
<h2>Slide SlideShow</h2>
<header>
<h2 id="caption">Headers</h2>
<img id="slide" src="Images/Header/paintingone.jpg" alt="">
<div id="slides">
<img src="Images/Header/paintingone.jpg" alt="One">
<img src="Images/Header/paintingtwo.jpg" alt="Two">
<img src="Images/Header/paintingthree.jpg" alt="Three">
<img src="Images/Header/paintingfour.jpg" alt="Four">
</div>
</header>
<main>
</main>
</body>
</html>