网站首页 > 知识剖析正文

用网页做个ppt- 定时全屏切换图片

nixiaole 2025-01-07 14:51:10 知识剖析 13 ℃

用网页做个ppt，就是目录下一堆图片，每隔10秒切换一个图片，全屏显示。

图片如果分辨率不同，也可以自动拉伸。

用ai折腾了一下。

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }


    
    #image {
  width: 100vw;
  height: 100vh;
  object-fit: fill;
  display: flex;
  justify-content: center;
  align-items: center;
}
  </style>
  <script>
    var images = ["image1.jpg", "image2.jpg", "image3.jpg"];
    var currentImage = 0;

    function changeImage() {
      var imageElement = document.getElementById("image");
      imageElement.src = images[currentImage];
      currentImage = (currentImage + 1) % images.length;
    }

    setInterval(changeImage, 60000);
  </script>
</head>

<body>
  <img id="image" src="image1.jpg" alt="Image" />
</body>

</html>

上一篇： HTML+CSS 实现商品图片列表放大视觉效果复制完整代码即可马上调用
下一篇：超不错 Vue.js 实现H5页面截图

网站首页 > 知识剖析 正文

用网页做个ppt- 定时全屏切换图片

猜你喜欢

网站首页 > 知识剖析正文