论坛 › 欢乐水吧 › 图片切换做动图

亚伦影音工作室 发表于 2026-5-8 20:44

图片切换做动图

本帖最后由 亚伦影音工作室 于 2026-5-9 16:20 编辑 <br /><br /><style>
@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
:root {--ocean-dark: #0a3d62;--ocean-medium: #3c6382;--ocean-light: #60a3bc;--sand-color: #f5e1b5;--shell-light: #f0e6d2;--shell-dark: #d9c9a3;--color-1: #ff0000;--color-2: #00aa00;--color-3: #fd27d2;--color-4: #000078;--color-5: #0dd7de;--color-6: #ff0000;--color-7: #000;--color-8: #ff0000;--starfish-body: #fb2f39;--starfish-accent: #fb2f39;--starfish-light: #fbb5b8;}
#papa{margin: 10px -300px;
        width: 1186px;
        height: 620px;
        background:#000 url(https://pic1.imgdb.cn/item/69fe859540ff184685b156e6.png) no-repeat center/cover;
        box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
        position: relative;overflow: hidden;font-family: "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif";
        z-index: 12345;}

#vid{width: 100%; height: 100%;
position:absolute;
top:0%; left:0%;
object-fit: cover; pointer-events: none;
}

#slider{margin: 0px 0px;
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 1;mix-blend-mode: lighten;}
#slider img{width: 100%;}

#slider1{margin: 100px 10px;
        width: 500px;
        height: 280px;
        mix-blend-mode: lighten;
        z-index: 2;cursor: pointer;}
#slider1 img{width: 100%;}
#lyric {position: absolute;left: 50%;bottom: 3%;transform: translateX(-50%);z-index: 12;display: flex;flex-direction: column;justify-content: center;height: 160px;width: 80%;text-align: center;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);font-size: 3.5em; }
#lyricDisplay{height: 100%;letter-spacing: 0px;display: flex;align-items: center;justify-content: center;overflow: hidden;position: relative;padding: 0 1em;width: 100%;}
.lyrichar {display: inline-block;opacity: 0;animation: charAppear 0.5s forwards,hue-rotate 0.5s linear infinite,rot 3s linear infinite;margin: 0 2px;}
@keyframes charAppear {to {opacity: 1;transform: translate(0%);}}

.stop .lyrichar{animation-play-state: paused;}
#player{position:absolute;top: 35%;z-index: 99;
            left: 18%;
width: 100px;
height: 100px;
display: grid;
        place-items: center;animation: rot 8s linear infinite ;}
#rect {position: absolute;
        display: grid;
        place-items: center;
width:35%;
height: 35%;
clip-path: polygon(60% 0, 100% 0, 50% 50%, 40% 100%, 0 100%, 50% 50%);

}
#rect:nth-of-type(1) { background:#5500ff;transform: rotate(0deg);
}
#rect:nth-of-type(2) { background:#ff0000;transform: rotate(45deg);
}
#rect:nth-of-type(3) { background:#00aa00;transform: rotate(90deg);
}
#rect:nth-of-type(4) { background:#fff000;transform: rotate(135deg);
}
@keyframes rot {to { transform: rotate(360deg);filter: hue-rotate(360deg); }}

#statusDisplay{position: absolute;z-index: 1;font-size: 1.5em;font-weight: 500;left: 18%;top: 32%;color:#fff}
#fullscreen{border-radius: 4px;position: absolute;
color:#eee;background:#0000;box-shadow:0px 0px 0px 0px #fff;
padding: 4px 8px;z-index: 120;
font-size: 20px;
border: none;
cursor: pointer;top: 5px;left: 13%;
}

</style>
<divid="papa">
<div id="fullscreen" title="屏展模式">全屏欣赏</div>
<video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/91ef88c1f6fe1b112c8a43d921d4490c_preview.mp4" loop muted autoplay=""></video>
<divid="statusDisplay">播放中: -2:20 </div>
<img id="slider" src="https://pic1.imgdb.cn/item/69fd828640ff184685aeb368.png" alt="轮播图">
<img id="slider1" src="https://pic1.imgdb.cn/item/69fdafb140ff184685af3901.png"" alt="轮播图">

<div id="player">
<pid="rect"></p>
<pid="rect"></p>
<pid="rect"></p>
<pid="rect"></p>
</div>


<div id="lyric">
<div id="lyricDisplay" ></div>
</div>


</div>
<audio id="aud" src="https://s2.cldisk.com/sv-w9/audio/01/c4/f9/e2795451721ee3b10b3d9328be3b3ffe/audio.mp3" loop autoplay ></audio>

<script>
const images = ["https://pic1.imgdb.cn/item/69fd828640ff184685aeb368.png", "https://pic1.imgdb.cn/item/69fd828740ff184685aeb36b.png", "https://pic1.imgdb.cn/item/69fd828740ff184685aeb36a.png","https://pic1.imgdb.cn/item/69fd828740ff184685aeb36c.png","https://pic1.imgdb.cn/item/69fd828740ff184685aeb36d.png","https://pic1.imgdb.cn/item/69fd827440ff184685aeb360.png","https://pic1.imgdb.cn/item/69fd827440ff184685aeb35d.png","https://pic1.imgdb.cn/item/69fd827440ff184685aeb35f.png","https://pic1.imgdb.cn/item/69fd827440ff184685aeb35e.png","https://pic1.imgdb.cn/item/69fd827440ff184685aeb35c.png","https://pic1.imgdb.cn/item/69fd828640ff184685aeb368.png", "https://pic1.imgdb.cn/item/69fd828740ff184685aeb36b.png", "https://pic1.imgdb.cn/item/69fd828740ff184685aeb36a.png","https://pic1.imgdb.cn/item/69fd828740ff184685aeb36c.png","https://pic1.imgdb.cn/item/69fd828740ff184685aeb36d.png","https://pic1.imgdb.cn/item/69fd827440ff184685aeb360.png","https://pic1.imgdb.cn/item/69fd827440ff184685aeb35d.png","https://pic1.imgdb.cn/item/69fd827440ff184685aeb35f.png","https://pic1.imgdb.cn/item/69fd827440ff184685aeb35e.png","https://pic1.imgdb.cn/item/69fd827440ff184685aeb35c.png"];
constimags = ["https://pic1.imgdb.cn/item/69fdafb140ff184685af3901.png","https://pic1.imgdb.cn/item/69fdafb140ff184685af3902.png","https://pic1.imgdb.cn/item/69fdafb140ff184685af3904.png","https://pic1.imgdb.cn/item/69fdafb140ff184685af3903.png","https://pic1.imgdb.cn/item/69fdafb140ff184685af3905.png","https://pic1.imgdb.cn/item/69fdafbc40ff184685af3909.png","https://pic1.imgdb.cn/item/69fdafbc40ff184685af390a.png","https://pic1.imgdb.cn/item/69fdafbc40ff184685af390b.png","https://pic1.imgdb.cn/item/69fdafbc40ff184685af390c.png","https://pic1.imgdb.cn/item/69fdafbc40ff184685af390d.png","https://pic1.imgdb.cn/item/69fdafbc40ff184685af390e.png","https://pic1.imgdb.cn/item/69fdafc640ff184685af3913.png","https://pic1.imgdb.cn/item/69fdafc640ff184685af3914.png","https://pic1.imgdb.cn/item/69fdafc640ff184685af3915.png","https://pic1.imgdb.cn/item/69fdafc640ff184685af3916.png","https://pic1.imgdb.cn/item/69fdafc640ff184685af3916.png","https://pic1.imgdb.cn/item/69fdb18d40ff184685af39e7.png","https://pic1.imgdb.cn/item/69fdb18d40ff184685af39e9.png","https://pic1.imgdb.cn/item/69fdb18d40ff184685af39ea.png","https://pic1.imgdb.cn/item/69fdb18d40ff184685af39eb.png"];

let index = 0;
setInterval(() => {if(!aud.paused){
index = (index + 1) % images.length;
index = (index + 1) % imags.length;
document.getElementById("slider").src = images;
document.getElementById("slider1").src = imags;
}
}, 200); // 每3秒切换一次


</script>

<script>
const papa = document.getElementById('papa');
const audioPlayer = document.getElementById('aud');
const starfishPlayer =document.getElementById('player');
const lyricDisplay = document.getElementById('lyricDisplay');
const statusDisplay = document.getElementById('statusDisplay');

let currentLyricIndex = -1;
let isUpdating = false;
window.isPlaying = false;
let isMuted = true;
let fsTimer = null;
let sparkleInterval = null;
function createSingleSparkle() {
const sparkle = document.createElement('div');
sparkle.className = 'sparkle';
const x = Math.random() * 100;
const y = Math.random() * 100;
sparkle.style.left = `${x}%`;
sparkle.style.top = `${y}%`;
sparkle.style.animationDelay = `${Math.random() * 2}s`;
sparkle.style.setProperty('--tx', `${(Math.random() - 0.5) * 80}px`);
sparkle.style.setProperty('--ty', `${(Math.random() - 0.5) * 80}px`);
sparklesContainer.appendChild(sparkle);
setTimeout(() => {
if (sparkle && !sparkle.classList.contains('hidden')) {
sparkle.remove();
}
}, 3000);
}
function startSparkleLoop() {
stopSparkleLoop();
sparklesContainer.classList.remove('fade-out');
sparklesContainer.style.opacity = 1;
sparklesContainer.innerHTML = '';
for (let i = 0; i < 15; i++) {
createSingleSparkle();
}
sparkleInterval = setInterval(() => {
if (window.isPlaying) {
createSingleSparkle();
}
}, 500);
}
function stopSparkleLoop() {
clearInterval(sparkleInterval);
sparkleInterval = null;
}
function fadeOutAllSparkles() {
stopSparkleLoop();
sparklesContainer.classList.add('fade-out');
document.querySelectorAll('.sparkle').forEach(sparkle => {
sparkle.classList.add('hidden');
});
setTimeout(() => {
sparklesContainer.innerHTML = '';
}, 800);
}
function resetLyrics() {
currentLyricIndex = -1;
lyricDisplay.innerHTML = '';
}
function togglePlayPause() {
if (audioPlayer.paused) {
if (audioPlayer.currentTime <= 0.5) {
resetLyrics();
}
audioPlayer.play()
.then(() => {
vid.play();
window.isPlaying = true;
starfishPlayer.classList.remove('paused');
starfishPlayer.classList.add('playing');
statusDisplay.textContent = '播放中...';
startSparkleLoop();
})
.catch(error => {
console.error('播放失败:', error);
statusDisplay.textContent = '播放失败，请检查音频文件';
});
} else {
audioPlayer.pause();
vid.pause();player.style.animationPlayState = 'paused';
window.isPlaying = false;
starfishPlayer.classList.remove('playing');
starfishPlayer.classList.add('paused');
statusDisplay.textContent = '已暂停';
fadeOutAllSparkles();
}
}
audioPlayer.addEventListener('play', () => {
animatedGif.classList.add('active');
staticImage.classList.remove('active');
});
audioPlayer.addEventListener('pause', () => {
staticImage.classList.add('active');
animatedGif.classList.remove('active');
});
starfishPlayer.addEventListener('click', (e) => {
e.stopPropagation();player.style.animationPlayState = 'running';
togglePlayPause();
});
function displayLyricCharByChar(text) {
lyricDisplay.innerHTML = '';
const chars = text.split('');
const colorList = ['var(--color-1)', 'var(--color-2)', 'var(--color-3)', 'var(--color-4)', 'var(--color-5)', 'var(--color-6)'];
chars.forEach((char, i) => {
const span = document.createElement('span');
span.className = 'lyrichar';
span.style.color = colorList;
if (char === ' ') {
span.innerHTML = '&nbsp;';
} else {
span.textContent = char;
}
const offset = i === 0 ? 0 : i * 30;
span.style.transform = `translateY(${offset}px)`;
span.style.animationDelay = `${i * 0.08}s`;
if (/[，。！？,.!?]/.test(char)) {
span.style.animationDelay = `${i * 0.08 + 0.08}s`;
}
lyricDisplay.appendChild(span);
});
}
audioPlayer.addEventListener('timeupdate', () => {
if (!window.isPlaying) return;
if (isUpdating) return;
isUpdating = true;
setTimeout(() => isUpdating = false, 100);
const currentTime = audioPlayer.currentTime;
const remainingTime = audioPlayer.duration - currentTime;
statusDisplay.textContent = `播放中: ${formatTime(-remainingTime)}`;
for (let i = 0; i < lyrics.length; i++) {
const currentLyricTime = lyrics.time;
const nextLyricTime = i < lyrics.length - 1 ? lyrics.time : Infinity;
if (currentTime >= currentLyricTime - 0.3 && currentTime < nextLyricTime + 0.3) {
if (currentLyricIndex !== i) {
currentLyricIndex = i;
displayLyricCharByChar(lyrics.text);
}
break;
}
}
});
function formatTime(seconds) {
const absSeconds = Math.abs(seconds);
const mins = Math.floor(absSeconds / 60);
const secs = Math.floor(absSeconds % 60);
const sign = seconds < 0 ? '-' : '';
return `${sign}${mins}:${secs < 10 ? '0' : ''}${secs}`;
}
const lrcText = `
作词：范贵宾/老邪神
作曲：任夏
演唱：梦姐
编曲：SN/建行
混音：建行
统筹：黄国书
制作人：何文宇
制作统筹：谌宥/金佳欣
宣发策划：杨春雪/罗德彦
宣发总监：王倩/黄超亚
宣发：一米星空x 靠谱音乐x 有点点
监制：王腾飞
艺人经纪：韦耀
发行人：韦琪
发行公司：万象星云
本以为和你牵过了手
就能和你相爱相守
你转身丢下所有的承诺
剩我在回忆 苦苦守候
早知道情会如此难受
当初就不该 付出所有
爱到最后你我覆水难收
我连问候都 没有理由
风不懂我 相思的愁
你不懂我 心有多痛
曾经说好余生紧紧相拥
如今却留给我一句保重
风不懂我 相思的愁
你不懂我 眼泪汹涌
明知我们再也没有以后
可我偏偏守着回忆 不肯放手
早知道情会如此难受
当初就不该 付出所有
爱到最后你我覆水难收
我连问候都 没有理由
风不懂我 相思的愁
你不懂我 心有多痛
曾经说好余生紧紧相拥
如今却留给我一句保重
风不懂我 相思的愁
你不懂我 眼泪汹涌
明知我们再也没有以后
可我偏偏守着回忆 不肯放手
风不懂我 相思的愁
你不懂我 心有多痛
曾经说好余生紧紧相拥
如今却留给我一句保重
风不懂我 相思的愁
你不懂我 眼泪汹涌
明知我们再也没有以后
可我偏偏守着回忆 不肯放手

`;
function parseLrc(lrc) {
const lyrics = [];
const lines = lrc.trim().split('\n');
const lrcRegex = /\[(\d{2}):(\d{2})\.(\d{2})\](.*)/;
lines.forEach(line => {
const match = line.match(lrcRegex);
if (match) {
const minutes = parseInt(match);
const seconds = parseInt(match);
const ms = parseInt(match);
const totalSeconds = minutes * 60 + seconds + ms / 100;
const text = match.trim();
lyrics.push({
time: totalSeconds,
text: text
});
}
});
return lyrics;
}
const lyrics = parseLrc(lrcText);
audioPlayer.addEventListener('ended', () => {
resetLyrics();
starfishPlayer.classList.remove('playing');

starfishPlayer.classList.add('paused');

statusDisplay.textContent = '播放结束，可重新播放';
window.isPlaying = false;
fadeOutAllSparkles();
});
audioPlayer.addEventListener('loadedmetadata', () => {
statusDisplay.textContent = '音频已加载，点击播放开始';
tryAutoPlay();
});

audioPlayer.addEventListener('error', (e) => {
console.error('音频错误:', e);
statusDisplay.textContent = '音频加载失败，请检查文件路径';
});
function tryAutoPlay() {
audioPlayer.play()
.then(() => {

window.isPlaying = true;
starfishPlayer.classList.remove('paused');
starfishPlayer.classList.add('playing');
statusDisplay.textContent = '音乐加载中...';
startSparkleLoop();
})
}
let fs = true;
      fullscreen.onclick = () => {
            if (fs) {
                fullscreen.innerText = '退出全屏';
                papa.requestFullscreen();
            } else {
                fullscreen.innerText = '全屏欣赏';
                document.exitFullscreen();
            }
            fs = !fs;
      };

</script>

小辣椒 发表于 2026-5-8 22:01

亚纶，没有反应啊，是我网络卡吗？

亚伦影音工作室 发表于 2026-5-8 22:14

小辣椒 发表于 2026-5-8 22:01
亚纶，没有反应啊，是我网络卡吗？

老小孩音乐失联！

小辣椒 发表于 2026-5-8 22:19

亚伦影音工作室 发表于 2026-5-8 22:14
老小孩音乐失联！

换首音乐上去啊

查看完整版本: 图片切换做动图