如何修改index.html实现文件夹内图片10秒间隔循环轮播？

需要做的修改： #

• 在<head>标签内加入JavaScript逻辑，负责图片的定时切换与循环
• 定义包含所有轮播图片路径的数组（图片需放在photo文件夹下）
• 给页面中的<img>标签添加唯一id，方便JavaScript定位元素
• 设置10秒间隔的定时器，自动切换图片并实现循环播放

可运行的示例代码： #

<html>
<head>
<meta name="description" content="Department Events">
<title> Recent and Ongoing Events in the Department of Physics </title>
<script>
// 定义photo文件夹下的图片列表，可根据实际情况添加/修改文件名
const imageList = [
    "photo/physics-1.jpg",
    "photo/physics-2.jpg",
    "photo/physics-3.jpg"
];
let currentIndex = 0;

function changeImage() {
    const imgElement = document.getElementById("slideshow-img");
    currentIndex = (currentIndex + 1) % imageList.length;
    imgElement.src = imageList[currentIndex];
}

// 页面加载完成后启动轮播，每10秒切换一次
window.onload = function() {
    setInterval(changeImage, 10000);
};
</script>
</head>
<body style="background-color:powderblue;">
<center>
<img id="slideshow-img" style="width: 985px; height: 408px;" src="photo/physics-1.jpg">
<h1 style="color:blue;">Department of Physics - Events and Activities</h1>
<hr>
</center>
</body>
</html>

注意事项： #

• 确保photo文件夹与HTML文件处于同级目录，且数组中的文件名与实际图片完全匹配
• 可根据图片数量调整imageList数组的内容，添加或删除图片路径
• 若需修改切换间隔，调整setInterval的第二个参数（单位为毫秒，10000代表10秒）

内容的提问来源于stack exchange，提问作者Sushil Chauhan