搜索
热搜: 活动 交友 discuz
查看: 168|回复: 10

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

  [复制链接]
  • TA的每日心情
    郁闷
    3 天前
  • 签到天数: 24 天

    连续签到: 10 天

    [LV.4]偶尔看看III

    25

    主题

    49

    回帖

    2496

    积分

    社区管理员

    积分
    2496

    最佳新人活跃会员热心会员推广达人宣传达人灌水之王突出贡献优秀版主荣誉管理论坛元老

    QQ
    发表于 2025-1-5 22:58:14 | 显示全部楼层 |阅读模式
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>自动轮换壁纸</title>
    7.     <style>
    8.         body, html {
    9.             margin: 0;
    10.             padding: 0;
    11.             height: 100%;
    12.             overflow: hidden;
    13.             background: url('https://bbs.cnzv.cc/up/upload/pic/12/20241231-fde63210eb7ed8c519618a77501040f9.jpg') no-repeat center center fixed; /* 添加固定背景图 */
    14.             background-size: cover;
    15.         }

    16.         #wallpaper {
    17.             position: absolute;
    18.             top: 0;
    19.             left: 0;
    20.             width: 100%;
    21.             height: 100%;
    22.             background-size: cover;
    23.             background-position: center;
    24.             transition: background-image 1s ease-in-out; /* 基础转场效果 */
    25.         }

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

    30.         @keyframes fadeEffect {
    31.             from { opacity: 0; }
    32.             to { opacity: 1; }
    33.         }

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

    37.         @keyframes slideLeftEffect {
    38.             from { transform: translateX(100%); }
    39.             to { transform: translateX(0); }
    40.         }

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

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

    62.         function changeWallpaper() {
    63.             currentIndex = (currentIndex + 1) % images.length;
    64.             const effect = effects[Math.floor(Math.random() * effects.length)]; // 随机选择一个转场效果
    65.             wallpaper.classList.remove(...effects); // 移除所有可能的类名
    66.             wallpaper.classList.add(effect); // 添加新的转场效果类名
    67.             wallpaper.style.backgroundImage = images[currentIndex];
    68.         }

    69.         setInterval(changeWallpaper, 5000); // 每5秒切换一次壁纸
    70.     </script>
    71. </body>
    72. </html>
    复制代码


    哎...今天够累的,签到来了1...
  • TA的每日心情
    奋斗
    10 小时前
  • 签到天数: 30 天

    连续签到: 30 天

    [LV.5]常住居民I

    30

    主题

    237

    回帖

    853

    积分

    VIP会员

    积分
    853

    最佳新人活跃会员热心会员推广达人宣传达人灌水之王突出贡献

    发表于 2025-1-6 10:44:14 | 显示全部楼层
    本帖最后由 klxf 于 2025-1-6 10:47 编辑

    漂亮的图片轮播,谢谢admin管理员精彩分享
    该会员没有填写今日想说内容.
  • TA的每日心情
    开心
    昨天 10:49
  • 签到天数: 28 天

    连续签到: 28 天

    [LV.4]偶尔看看III

    153

    主题

    356

    回帖

    2517

    积分

    社区管理员

    积分
    2517

    最佳新人活跃会员热心会员推广达人宣传达人灌水之王突出贡献优秀版主荣誉管理

    发表于 2025-1-6 19:21:38 | 显示全部楼层
    我怎么看不见图图变换呢?

    点评

    不能吧 我测试了 可以的  详情 回复 发表于 2025-1-6 21:37
  • TA的每日心情
    开心
    前天 04:31
  • 签到天数: 22 天

    连续签到: 11 天

    [LV.4]偶尔看看III

    23

    主题

    18

    回帖

    850

    积分

    VIP会员

    积分
    850

    最佳新人活跃会员热心会员推广达人宣传达人灌水之王突出贡献论坛元老

    发表于 2025-1-6 19:30:44 | 显示全部楼层
    [i=s] 本帖最后由 亚伦影音工作室 于 2025-1-6 19:39 编辑 [/i]

    高制作!
    回复

    使用道具 举报

  • TA的每日心情
    郁闷
    3 天前
  • 签到天数: 24 天

    连续签到: 10 天

    [LV.4]偶尔看看III

    25

    主题

    49

    回帖

    2496

    积分

    社区管理员

    积分
    2496

    最佳新人活跃会员热心会员推广达人宣传达人灌水之王突出贡献优秀版主荣誉管理论坛元老

    QQ
     楼主| 发表于 2025-1-6 21:37:34 | 显示全部楼层
    醉美水芙蓉 发表于 2025-1-6 19:21
    我怎么看不见图图变换呢?

    不能吧  我测试了 可以的

    点评

    是可以的,亚伦老师已经加了音乐我可以看到!不知这个单独代码我怎么看不见图片?  详情 回复 发表于 2025-1-6 21:44
    哎...今天够累的,签到来了1...
  • TA的每日心情
    开心
    昨天 10:49
  • 签到天数: 28 天

    连续签到: 28 天

    [LV.4]偶尔看看III

    153

    主题

    356

    回帖

    2517

    积分

    社区管理员

    积分
    2517

    最佳新人活跃会员热心会员推广达人宣传达人灌水之王突出贡献优秀版主荣誉管理

    发表于 2025-1-6 21:44:06 | 显示全部楼层
    admin 发表于 2025-1-6 21:37
    不能吧  我测试了 可以的

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

    该用户从未签到

    0

    主题

    0

    回帖

    3

    积分

    黑铁会员

    积分
    3
    发表于 2025-1-7 20:18:41 | 显示全部楼层
    支持一下,期待更多东西
  • TA的每日心情
    奋斗
    2025-1-16 01:13
  • 签到天数: 1 天

    连续签到: 1 天

    [LV.1]初来乍到

    0

    主题

    0

    回帖

    38

    积分

    社区管理员

    积分
    38
    发表于 2025-1-12 17:46:44 | 显示全部楼层
    我表示压力很大

    该用户从未签到

    0

    主题

    0

    回帖

    11

    积分

    黑铁会员

    积分
    11
    发表于 2025-1-13 16:57:55 | 显示全部楼层
    藕是来打酱油滴...

    该用户从未签到

    0

    主题

    0

    回帖

    9

    积分

    黑铁会员

    积分
    9
    发表于 2025-1-14 21:01:52 | 显示全部楼层
    这个好好支持一下
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|小黑屋|纳兰音画网 ( 蜀ICP备2021011087号 )

    GMT+8, 2025-1-24 11:31 , Processed in 0.150923 second(s), 25 queries .

    Powered by Discuz! X3.5

    © 2001-2020 Comsenz Inc.

    快速回复 返回顶部 返回列表