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

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[Math.floor(Math.random() * effects.length)]; // 随机选择一个转场效果
wallpaper.classList.remove(...effects); // 移除所有可能的类名
wallpaper.classList.add(effect); // 添加新的转场效果类名
wallpaper.style.backgroundImage = images[currentIndex];
}
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

[i=s] 本帖最后由亚伦影音工作室于 2025-1-6 19:39 编辑 [/i]

高制作！

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

支持一下，期待更多东西

红尘过客 · 发表于 2025-1-12 17:46:44

我表示压力很大

夏艳妍 · 发表于 2025-1-13 16:57:55

藕是来打酱油滴...

332 · 发表于 2025-1-14 21:01:52

这个好好支持一下

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

点评

点评

最佳新人

活跃会员

热心会员

推广达人

宣传达人

灌水之王

突出贡献

优秀版主

荣誉管理

论坛元老