樵歌消寒词之《啰唝曲》

梦油

红影 发表于 2025-2-17 21:13
现在论坛里好多人AI都玩得特别好了，看着羡慕呢

对于我来说，只能望之兴叹啦。

世外桃源

厉害了，这个制作太美了

世外桃源

欣赏佳作感谢分享

红影

马黑黑 发表于 2025-2-17 23:19
明晰的层级关系，一看就知道哪儿是哪儿

是的，黑黑说得太对了

红影

起个网名好难 发表于 2025-2-18 06:24
var turn2 = () => {
        idx = Math.floor(Math.random() * divs.length);
        if(idx === lastI ...

谢谢难难，这个太好了

马黑黑

红影 发表于 2025-2-18 21:18
是的，黑黑说得太对了

红影

庶民 发表于 2025-2-18 08:14
太美了，没有听到朗诵声。

我没做朗诵，还不会呢

红影

梦油 发表于 2025-2-18 10:38
对于我来说，只能望之兴叹啦。

也没事，知道有这个就好啊

红影

世外桃源 发表于 2025-2-18 14:13
厉害了，这个制作太美了

谢谢桃源鼓励，主要是学习黑黑的代码呢

红影

起个网名好难 发表于 2025-2-18 06:24
var turn2 = () => {
        idx = Math.floor(Math.random() * divs.length);
        if(idx === lastI ...

去试了一下，好像不行啊，不翻页了呢。

起个网名好难

红影 发表于 2025-2-18 21:24 去试了一下，好像不行啊，不翻页了呢。

第一天

雪梅谁更爱，
相依恋墨香。
雪魂冰作骨，
梅蕊傲群芳。

第二天

侵香风作柬，
吹过柔草茵。
蝶停花蕊静，
迷醉满园春。

第三天

柬择绮罗帕，
柔情侵春香。
草心迷路远，
风递与檀郎。

第四天

暗香侵柔雪，
兰草倚春风。
绣茵心化柬，
迷我万千重。

第五天

草茵侵香柬，
春风迷柔情。
花随流水去，
杜宇一声声。

第六天

柬自春风侵，
香从茵草来。
柔情蜜意在，
迷梦为君开。

第七天

草长莺飞处，
香侵春风柔。
迷烟茵氲散。
拆柬避人羞。

第八天

草茵迷烟处，
侵香春风来。
柔情谁解意，
捧柬笑颜开。

第九天

草侵春风绿，
茵席卧晴柔。
迷香随笔散，
飘柬载江流。

1

起个网名好难

1. 顺序换页，点击只是停止或启动；
2.稍做了点修改，lastIdx 本意是保留的上次索引号，没用了改为curIdx 意为当前索引号，省个变量；
3. 原来那个 216 不知怎么来的

1. <style>
   
2.         #papa { margin: 60px 0 30px calc(50% - 681px); width: 1200px; height: 674px; background: url('https://pic1.imgdb.cn/item/67b2b078d0e0a243d40018b6.jpg') no-repeat center/cover; box-shadow: 3px 3px 8px black; display: grid; place-items: center; position: relative; font-size: 0; border-radius:32px; z-index: 1;  }
   
3.         #stage { position: absolute; width: 240px; height: 400px;  white-space: nowrap; cursor: pointer; font-size: 0px; color:red; overflow: hidden; text-align: center; right: 150px; top: 90px; }
   
4.         #stage > div  { width: 100%; height: 100%; display: inline-block; }
   
5.         #pic { position: absolute; width: 160px; height: 285px; top: 250px; left: 600px;  mix-blend-mode: Multiply; }
   
6.         #btnplay { --state: running; position: absolute; top: 270px; left:750px; width: 26px; height: 26px; color: red; display: grid; place-items: center; cursor: pointer; font-size: 16px; }
   
7.         #btnplay::before { position: absolute; content: ''; width: 100%; height: 100%; border: 2px dashed cyan; border-radius: 50%; animation: rot 8s linear infinite var(--state); }
   
8.         #btnplay:hover::before { border-style: dotted; }
   
9.         @keyframes rot { to { transform: rotate(360deg); } }
   
10.                 .ptxt        {font-size:36px;letter-spacing:6px;}
    
11. </style>
    
12. 
    
13. <div id="papa">
    
14.         <div id="stage">
    
15.                 <div><p class="ptxt">第一天<br><br>雪梅谁更爱，<br>相依恋墨香。<br>雪魂冰作骨，<br>梅蕊傲群芳。<br></p></div>
    
16.                 <div><p class="ptxt">第二天<br><br>侵香风作柬，<br>吹过柔草茵。<br>蝶停花蕊静，<br>迷醉满园春。<br></p></div>
    
17.                 <div><p class="ptxt">第三天<br><br>柬择绮罗帕，<br>柔情侵春香。<br>草心迷路远，<br>风递与檀郎。<br></p></div>
    
18.                 <div><p class="ptxt">第四天<br><br>暗香侵柔雪，<br>兰草倚春风。<br>绣茵心化柬，<br>迷我万千重。<br></p></div>
    
19.                 <div><p class="ptxt">第五天<br><br>草茵侵香柬，<br>春风迷柔情。<br>花随流水去，<br>杜宇一声声。<br></p></div>
    
20.                 <div><p class="ptxt">第六天<br><br>柬自春风侵，<br>香从茵草来。<br>柔情蜜意在，<br>迷梦为君开。<br></p></div>
    
21.                 <div><p class="ptxt">第七天<br><br>草长莺飞处，<br>香侵春风柔。<br>迷烟茵氲散。<br>拆柬避人羞。<br></p></div>
    
22.                 <div><p class="ptxt">第八天<br><br>草茵迷烟处，<br>侵香春风来。<br>柔情谁解意，<br>捧柬笑颜开。<br></p></div>
    
23.                 <div><p class="ptxt">第九天<br><br>草侵春风绿，<br>茵席卧晴柔。<br>迷香随笔散，<br>飘柬载江流。<br></p></div>
    
24.         </div>
    
25.         <div id="btnplay">1</div>
    
26.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=441617813" autoplay loop></audio>
    
27.         <img id="pic" alt="" src="https://pic1.imgdb.cn/item/67b212bbd0e0a243d4ffe45e.gif" />
    
28. </div>
    
29. 
    
30. <script>
    
31. var curIdx = 0, pTimer = null;
    
32. var divs = stage.querySelectorAll('div');
    
33. var mState = () => {
    
34.         btnplay.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
35.         btnplay.title = stage.title = aud.paused ? '点击播放' : '点击暂停';
    
36.         aud.paused ? clearTimeout(pTimer) : turn2();
    
37. };
    
38. var turn2 = () => {
    
39.         //idx = Math.floor(Math.random() * divs.length);
    
40.         //if(idx === lastIdx) idx = (idx+1) % divs.length;
    
41.         //lastIdx = idx;
    
42.         btnplay.innerText = curIdx + 1;
    
43.         stage.scroll({left: curIdx * stage.clientWidth, top: 0, behavior: 'smooth'});
    
44.                 curIdx++; curIdx %= divs.length;
    
45.         if(pTimer) clearTimeout(pTimer);
    
46.         pTimer = setTimeout(turn2, 8000);
    
47. };
    
48. aud.onpause = aud.onplaying = () => mState();
    
49. stage.onclick = btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
    
50. </script>

复制代码

红影

起个网名好难 发表于 2025-2-18 21:43
#papa { margin: 60px 0 30px calc(50% - 681px); width: 1200px; height: 674px; backgroun ...

现在完全对了，太好了

红影

起个网名好难 发表于 2025-2-18 21:48
1. 顺序换页，点击只是停止或启动；
2.稍做了点修改，lastIdx 本意是保留的上次索引号，没用了改为curIdx  ...

顺序播放的就适合去做朗诵了，否则让朗诵声音跳浜不太现实呢

梦油

红影 发表于 2025-2-18 21:20
也没事，知道有这个就好啊

朽木不可雕也！

红影

梦油 发表于 2025-2-19 10:28
朽木不可雕也！

谦虚了，现在已经知道了啊

绿叶清舟

影厉害还用上高科技了啊

红影

绿叶清舟 发表于 2025-2-19 20:32
影厉害还用上高科技了啊

没声音的，只是做了个形象而已

小九

制作很漂亮，精彩

红影

小九 发表于 2025-2-21 10:17
制作很漂亮，精彩

谢谢九儿，学着玩一下呢