图片循环播放
<div><div style="width:200px;height:200px; border-radius:4px;">
<img
src="https://i.postimg.cc/0Q0r1bXc/7-IV-HS-S-EY0-XOLZMUNAY.gif"
alt="No data,please check the link"
style="border-radius:4px;"
/>
</div>
</div>
我的问题：我不想播放GIF，我想5张照片循环播放，每个10秒更换一张，代码如何修改？？ 要实现5张图片每10秒循环播放，您可以使用JavaScript和HTML来实现。请参考以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片循环播放</title>
<style>
.image-container {
width: 200px;
height: 200px;
border-radius: 4px;
position: relative;
}
.image-container img {
position: absolute;
top: 0;
left: 0;
border-radius: 4px;
display: none;
}
.image-container img.active {
display: block;
}
</style>
</head>
<body>
<div class="image-container">
<img src="https://example.com/image1.jpg" alt="Image 1" class="active" />
<img src="https://example.com/image2.jpg" alt="Image 2" />
<img src="https://example.com/image3.jpg" alt="Image 3" />
<img src="https://example.com/image4.jpg" alt="Image 4" />
<img src="https://example.com/image5.jpg" alt="Image 5" />
</div>
<script>
(function() {
let images = document.querySelectorAll('.image-container img');
let currentIndex = 0;
function changeImage() {
images.classList.remove('active');
currentIndex = (currentIndex + 1) % images.length;
images.classList.add('active');
}
setInterval(changeImage, 10000);
})();
</script>
</body>
</html>
这段代码创建了一个包含5张图片的图片循环播放器。图片会每隔10秒（10000毫秒）切换一次。将图片的URL替换为您要使用的实际图片URL即可。 二楼请教：<img src="https://example.com/image2.jpg" alt="Image 2" /> 我复制粘贴可以无限张图片对吗？ 哪个地方是修改 间隔时间的？？ lm68140318 发表于 2023-4-27 20:17
哪个地方是修改 间隔时间的？？
是的，您可以通过复制粘贴`<img src="https://example.com/imageX.jpg" alt="Image X" />`（其中X是图片编号）来添加更多图片。只需确保将URL更改为实际图片的URL即可。
间隔时间可以通过修改以下代码来调整：
setInterval(changeImage, 10000);
这里的`10000`表示间隔时间为10000毫秒（即10秒）。如果您想要更改间隔时间，只需将其更改为所需的毫秒数。例如，如果您希望每5秒更换一张图片，可以将其更改为：
setInterval(changeImage, 5000);
这将使图片每隔5秒切换一次。
页:
[1]