祖国一片新面貌（学习黑黑老师的No Happy Endings代码）
本帖最后由 梦江南 于 2025-2-15 14:12 编辑 <br /><br /><style>#papa { margin: 30px 0 30px calc(50% - 681px); width: 1200px; height: 760px; background: url('https://pic1.imgdb.cn/item/67afeaced0e0a243d4ff7adc.png') no-repeat center/cover; box-shadow: 3px 3px 8px black; display: grid; place-items: center; position: relative; border-radius:32px; }
#stage { position: absolute; width: 460px; height: 600px; font-size: 0; border-radius: 50%; overflow: hidden; white-space: nowrap; cursor: pointer; }
#stage img { width: 100%; height: 100%; mask: radial-gradient(red, transparent); }
#stage img:hover { mask: unset; }
#btnplay { --state: running; position: absolute; bottom: 10px;; width: 50px; height: 50px; color:Orange; display: grid; place-items: center; cursor: pointer; }
#btnplay::before { position: absolute; content: ''; width: 100%; height: 100%; border: 2px dashed cyan; border-radius: 50%; animation: rot 8s linear infinite var(--state); }
#btnplay:hover::before { border-style: dotted; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<div id="stage">
<img alt="" src="https://pic1.imgdb.cn/item/67afeb26d0e0a243d4ff7ae4.jpg" />
<img alt="" src="https://pic1.imgdb.cn/item/67afeb58d0e0a243d4ff7ae7.jpg" />
<img alt="" src="https://pic1.imgdb.cn/item/67afeb7fd0e0a243d4ff7aeb.jpg" />
<img alt="" src="https://pic1.imgdb.cn/item/67afeb7fd0e0a243d4ff7aeb.jpg" />
<img alt="" src="https://pic1.imgdb.cn/item/67afebccd0e0a243d4ff7aef.jpg" />
<img alt="" src="https://pic1.imgdb.cn/item/67afec48d0e0a243d4ff7af4.jpg" />
</div>
<div id="btnplay">1</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=5273953.mp3" autoplay loop></audio>
</div>
<script>
var lastIdx = 0, pTimer;
var images = stage.querySelectorAll('img');
var mState = () => {
btnplay.style.setProperty('--state', aud.paused ? 'paused' : 'running');
btnplay.title = stage.title = aud.paused ? '点击播放' : '点击暂停';
aud.paused ? clearTimeout(pTimer) : turn2();
};
var turn2 = (idx) => {
idx = Math.floor(Math.random() * images.length);
if(idx === lastIdx) idx = (idx+1) % images.length;
lastIdx = idx;
btnplay.innerText = idx + 1;
stage.scroll({left: idx * 460, top: 0, behavior: 'smooth'});
if(pTimer) clearTimeout(pTimer);
pTimer = setTimeout(turn2, 3000);
};
aud.onpause = aud.onplaying = () => mState();
stage.onclick = btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
</script> 想当初，耿莲凤、张振富合唱的这首歌真是风靡一时啊。 梦油 发表于 2025-2-15 11:07
想当初，耿莲凤、张振富合唱的这首歌真是风靡一时啊。
梦油老师对老歌这么熟悉啊！谢谢老师支持。 https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif 这帖有些神奇，强制回1# {:5_106:} 这个貌似用了scrollToView的翻页功能，必须暂停才能回帖呢。
还是用scroll的那个实例更好点{:4_204:} 制作漂亮。欣赏江南好帖{:4_187:} 起个网名好难 发表于 2025-2-15 12:13
问好老师，谢谢支持。 起个网名好难 发表于 2025-2-15 12:14
这帖有些神奇，强制回1#
这下换了黑黑老师的代码，就不会跑了。{:4_173:} 红影 发表于 2025-2-15 13:38
这个貌似用了scrollToView的翻页功能，必须暂停才能回帖呢。
还是用scroll的那个实例更好点
就是黑黑老师的这款翻页功能代码啊！
现在换了，这下不会跑了。{:4_173:} 红影 发表于 2025-2-15 13:38
制作漂亮。欣赏江南好帖
谢谢影子支持，问好。 漂亮！谢谢梦江南友友精彩分享{:4_204:} 梦江南 发表于 2025-2-15 14:15
这下换了黑黑老师的代码，就不会跑了。
被驯服的帖子{:5_106:} 杨帆 发表于 2025-2-15 15:40
漂亮！谢谢梦江南友友精彩分享
问好杨帆，谢谢支持， 起个网名好难 发表于 2025-2-15 15:41
被驯服的帖子
{:4_170:} 欣赏阿姨的优秀作业，这歌特别好听{:4_199:} 梦江南 发表于 2025-2-15 14:17
就是黑黑老师的这款翻页功能代码啊！
现在换了，这下不会跑了。
嗯嗯，现在好了，回复时不会跑了{:4_173:} 梦江南 发表于 2025-2-15 14:18
谢谢影子支持，问好。
不客气啊，问好江南{:4_187:} 小辣椒 发表于 2025-2-15 16:40
欣赏阿姨的优秀作业，这歌特别好听
问好小辣椒，这首是老歌，找不出祖国的山河歌曲，只好用这首歌“祖国一片新面貌”来了。
谢谢分享支持。 红影 发表于 2025-2-15 16:47
嗯嗯，现在好了，回复时不会跑了
我也不知道黑黑老师又出了新代码。{:4_173:}