梦油 发表于 2025-2-18 10:38

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

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

世外桃源 发表于 2025-2-18 14:13

厉害了，这个制作太美了

世外桃源 发表于 2025-2-18 14:13

欣赏佳作感谢分享

红影 发表于 2025-2-18 21:18

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

是的，黑黑说得太对了{:4_187:}

红影 发表于 2025-2-18 21:19

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

谢谢难难，这个太好了{:4_199:}

马黑黑 发表于 2025-2-18 21:19

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

{:4_191:}

红影 发表于 2025-2-18 21:19

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

我没做朗诵，还不会呢{:4_173:}

红影 发表于 2025-2-18 21:20

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

也没事，知道有这个就好啊{:4_187:}

红影 发表于 2025-2-18 21:20

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

谢谢桃源鼓励，主要是学习黑黑的代码呢{:4_173:}

红影 发表于 2025-2-18 21:24

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

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

起个网名好难 发表于 2025-2-18 21:43

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


<style>
      #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;}
      #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; }
      #stage > div{ width: 100%; height: 100%; display: inline-block; }
      #pic { position: absolute; width: 160px; height: 285px; top: 250px; left: 600px;mix-blend-mode: Multiply; }
      #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; }
      #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); } }
                .ptxt        {font-size:36px;letter-spacing:6px;}
</style>

<div id="papa">
        <div id="stage">
                <div><p class="ptxt">第一天<br><br>雪梅谁更爱，<br>相依恋墨香。<br>雪魂冰作骨，<br>梅蕊傲群芳。<br></p></div>
                <div><p class="ptxt">第二天<br><br>侵香风作柬，<br>吹过柔草茵。<br>蝶停花蕊静，<br>迷醉满园春。<br></p></div>
                <div><p class="ptxt">第三天<br><br>柬择绮罗帕，<br>柔情侵春香。<br>草心迷路远，<br>风递与檀郎。<br></p></div>
                <div><p class="ptxt">第四天<br><br>暗香侵柔雪，<br>兰草倚春风。<br>绣茵心化柬，<br>迷我万千重。<br></p></div>
                <div><p class="ptxt">第五天<br><br>草茵侵香柬，<br>春风迷柔情。<br>花随流水去，<br>杜宇一声声。<br></p></div>
                <div><p class="ptxt">第六天<br><br>柬自春风侵，<br>香从茵草来。<br>柔情蜜意在，<br>迷梦为君开。<br></p></div>
                <div><p class="ptxt">第七天<br><br>草长莺飞处，<br>香侵春风柔。<br>迷烟茵氲散。<br>拆柬避人羞。<br></p></div>
                <div><p class="ptxt">第八天<br><br>草茵迷烟处，<br>侵香春风来。<br>柔情谁解意，<br>捧柬笑颜开。<br></p></div>
                <div><p class="ptxt">第九天<br><br>草侵春风绿，<br>茵席卧晴柔。<br>迷香随笔散，<br>飘柬载江流。<br></p></div>
        </div>
        <div id="btnplay">1</div>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=441617813" autoplay loop></audio>
        <img id="pic" alt="" src="https://pic1.imgdb.cn/item/67b212bbd0e0a243d4ffe45e.gif" />
</div>

<script>
var curIdx = 0, pTimer = null;
var divs = stage.querySelectorAll('div');
var mState = () => {
      btnplay.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      btnplay.title = stage.title = aud.paused ? '点击播放' : '点击暂停';
      aud.paused ? clearTimeout(pTimer) : turn2();
};
var turn2 = () => {
      //idx = Math.floor(Math.random() * divs.length);
      //if(idx === lastIdx) idx = (idx+1) % divs.length;
      //lastIdx = idx;
      btnplay.innerText = curIdx + 1;
      stage.scroll({left: curIdx * stage.clientWidth, top: 0, behavior: 'smooth'});
                curIdx++; curIdx %= divs.length;
      if(pTimer) clearTimeout(pTimer);
      pTimer = setTimeout(turn2, 8000);
};
aud.onpause = aud.onplaying = () => mState();
stage.onclick = btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

起个网名好难 发表于 2025-2-18 21:48

1. 顺序换页，点击只是停止或启动；
2.稍做了点修改，lastIdx 本意是保留的上次索引号，没用了改为curIdx 意为当前索引号，省个变量；
3. 原来那个 216 不知怎么来的<style>
      #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;}
      #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; }
      #stage > div{ width: 100%; height: 100%; display: inline-block; }
      #pic { position: absolute; width: 160px; height: 285px; top: 250px; left: 600px;mix-blend-mode: Multiply; }
      #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; }
      #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); } }
                .ptxt        {font-size:36px;letter-spacing:6px;}
</style>

<div id="papa">
        <div id="stage">
                <div><p class="ptxt">第一天<br><br>雪梅谁更爱，<br>相依恋墨香。<br>雪魂冰作骨，<br>梅蕊傲群芳。<br></p></div>
                <div><p class="ptxt">第二天<br><br>侵香风作柬，<br>吹过柔草茵。<br>蝶停花蕊静，<br>迷醉满园春。<br></p></div>
                <div><p class="ptxt">第三天<br><br>柬择绮罗帕，<br>柔情侵春香。<br>草心迷路远，<br>风递与檀郎。<br></p></div>
                <div><p class="ptxt">第四天<br><br>暗香侵柔雪，<br>兰草倚春风。<br>绣茵心化柬，<br>迷我万千重。<br></p></div>
                <div><p class="ptxt">第五天<br><br>草茵侵香柬，<br>春风迷柔情。<br>花随流水去，<br>杜宇一声声。<br></p></div>
                <div><p class="ptxt">第六天<br><br>柬自春风侵，<br>香从茵草来。<br>柔情蜜意在，<br>迷梦为君开。<br></p></div>
                <div><p class="ptxt">第七天<br><br>草长莺飞处，<br>香侵春风柔。<br>迷烟茵氲散。<br>拆柬避人羞。<br></p></div>
                <div><p class="ptxt">第八天<br><br>草茵迷烟处，<br>侵香春风来。<br>柔情谁解意，<br>捧柬笑颜开。<br></p></div>
                <div><p class="ptxt">第九天<br><br>草侵春风绿，<br>茵席卧晴柔。<br>迷香随笔散，<br>飘柬载江流。<br></p></div>
        </div>
        <div id="btnplay">1</div>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=441617813" autoplay loop></audio>
        <img id="pic" alt="" src="https://pic1.imgdb.cn/item/67b212bbd0e0a243d4ffe45e.gif" />
</div>

<script>
var curIdx = 0, pTimer = null;
var divs = stage.querySelectorAll('div');
var mState = () => {
      btnplay.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      btnplay.title = stage.title = aud.paused ? '点击播放' : '点击暂停';
      aud.paused ? clearTimeout(pTimer) : turn2();
};
var turn2 = () => {
      //idx = Math.floor(Math.random() * divs.length);
      //if(idx === lastIdx) idx = (idx+1) % divs.length;
      //lastIdx = idx;
      btnplay.innerText = curIdx + 1;
      stage.scroll({left: curIdx * stage.clientWidth, top: 0, behavior: 'smooth'});
                curIdx++; curIdx %= divs.length;
      if(pTimer) clearTimeout(pTimer);
      pTimer = setTimeout(turn2, 8000);
};
aud.onpause = aud.onplaying = () => mState();
stage.onclick = btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

红影 发表于 2025-2-18 22:42

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

现在完全对了，太好了{:4_187:}

红影 发表于 2025-2-18 22:43

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

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

梦油 发表于 2025-2-19 10:28

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

朽木不可雕也！

红影 发表于 2025-2-19 13:40

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

谦虚了，现在已经知道了啊{:4_173:}

绿叶清舟 发表于 2025-2-19 20:32

影厉害还用上高科技了啊

红影 发表于 2025-2-19 20:41

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

没声音的，只是做了个形象而已{:4_173:}

小九 发表于 2025-2-21 10:17

制作很漂亮，精彩{:4_199:}

红影 发表于 2025-2-21 22:04

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

谢谢九儿，学着玩一下呢{:4_173:}
页: 1 2 [3] 4
查看完整版本: 樵歌消寒词之《啰唝曲》