admin 发表于 2025-1-5 22:58:14

分享一个幻灯轮换图，仿电脑壁纸轮换带注释代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自动轮换壁纸</title>
    <style>
      body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
            background: url('https://bbs.cnzv.cc/up/upload/pic/12/20241231-fde63210eb7ed8c519618a77501040f9.jpg') no-repeat center center fixed; /* 添加固定背景图 */
            background-size: cover;
      }

      #wallpaper {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            transition: background-image 1s ease-in-out; /* 基础转场效果 */
      }

      /* 定义不同的转场效果 */
      .fade {
            animation: fadeEffect 1s forwards;
      }

      @keyframes fadeEffect {
            from { opacity: 0; }
            to { opacity: 1; }
      }

      .slide-left {
            animation: slideLeftEffect 1s forwards;
      }

      @keyframes slideLeftEffect {
            from { transform: translateX(100%); }
            to { transform: translateX(0); }
      }

      .slide-right {
            animation: slideRightEffect 1s forwards;
      }

      @keyframes slideRightEffect {
            from { transform: translateX(-100%); }
            to { transform: translateX(0); }
      }
    </style>
</head>
<body>
    <div id="wallpaper"></div>
    <script>
      const wallpaper = document.getElementById('wallpaper');
      const images = [
            'url(https://bbs.cnzv.cc/up/upload/pic/12/20250105-7b6a3f5fce7c4775b1b6d438bae02506.jpg)',
            'url(https://bbs.cnzv.cc/up/upload/pic/12/20250105-8fd27817ac06e6d9d21d59664c319da8.jpg)',
            'url(https://bbs.cnzv.cc/up/upload/pic/12/20241231-3c3eb86df10d6071f90b9fe6ae6fd26a.jpg)',
            // 添加更多图片路径
      ];
      let currentIndex = 0;
      const effects = ['fade', 'slide-left', 'slide-right']; // 转场效果列表

      function changeWallpaper() {
            currentIndex = (currentIndex + 1) % images.length;
            const effect = effects; // 随机选择一个转场效果
            wallpaper.classList.remove(...effects); // 移除所有可能的类名
            wallpaper.classList.add(effect); // 添加新的转场效果类名
            wallpaper.style.backgroundImage = images;
      }

      setInterval(changeWallpaper, 5000); // 每5秒切换一次壁纸
    </script>
</body>
</html>


klxf 发表于 2025-1-6 10:44:14

本帖最后由 klxf 于 2025-1-6 10:47 编辑

漂亮的图片轮播，谢谢admin管理员精彩分享:)

醉美水芙蓉 发表于 2025-1-6 19:21:38

我怎么看不见图图变换呢？

亚伦影音工作室 发表于 2025-1-6 19:30:44

本帖最后由 亚伦影音工作室 于 2025-1-6 19:39 编辑 <br /><br />高制作！

admin 发表于 2025-1-6 21:37:34

醉美水芙蓉 发表于 2025-1-6 19:21
我怎么看不见图图变换呢？

不能吧我测试了 可以的

醉美水芙蓉 发表于 2025-1-6 21:44:06

admin 发表于 2025-1-6 21:37
不能吧我测试了 可以的

是可以的，亚伦老师已经加了音乐我可以看到！不知这个单独代码我怎么看不见图片？

快播 发表于 2025-1-7 20:18:41

支持一下，期待更多东西

红尘过客 发表于 6 天前

我表示压力很大

夏艳妍 发表于 5 天前

藕是来打酱油滴...

332 发表于 4 天前

这个好好支持一下
页: [1] 2
查看完整版本: 分享一个幻灯轮换图，仿电脑壁纸轮换带注释代码