图片循环播放

lm68140318 · 发表于 2023-4-26 20:45:57

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

<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秒更换一张，代码如何修改？？

isdkz · 发表于 2023-4-26 20:47:52

要实现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[currentIndex].classList.remove('active'); currentIndex = (currentIndex + 1) % images.length; images[currentIndex].classList.add('active'); } setInterval(changeImage, 10000); })(); </script> </body> </html>

这段代码创建了一个包含5张图片的图片循环播放器。图片会每隔10秒（10000毫秒）切换一次。将图片的URL替换为您要使用的实际图片URL即可。

lm68140318 · 发表于 2023-4-27 20:12:39

二楼请教：<img src="https://example.com/image2.jpg" alt="Image 2" /> 我复制粘贴可以无限张图片对吗？

lm68140318 · 发表于 2023-4-27 20:17:11

哪个地方是修改间隔时间的？？

isdkz · 发表于 2023-4-28 12:16:34

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秒切换一次。

账号		自动登录	找回密码
密码			立即注册