图片循环播放

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

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