霜染枫丹 发表于 2026-7-28 21:32

莲花池荷花轮播


<style type="text/css">
:root   {--w:900px; --h:600px;}   
#outframe {
    width:var(--w);
    height:var(--h);
    margin:160px auto;
    overflow:hidden;
    border-radius:32px;
    position:relative;
}
#pichold {
    width:calc(25 * var(--w));
    height:var(--h);
    /* 修改点1: 移除了 alternate，只保留无限循环 */
    animation: pshift 175s infinite;
}
#pichold img {width:var(--w);height:var(--h);float:left;}

.lyric-box{ position: absolute; left: 0; bottom: 0; width: 100%; padding: 25px 0; background: linear-gradient(transparent,rgba(0,0,0,0.5)); text-align: center; pointer-events: none; z-index: 99;}
.lyric-text{ color: #f8f8f8; font-size: 20px; line-height: 2.4; letter-spacing: 3px; text-shadow: 1px 2px 4px #000; transition: all 0.4s ease;}
.lyric-cur{ color: #ffedaa; font-size: 23px; font-weight: 500;}
.logo { position: absolute; left: 20px; top: 20px; width: 80px; height: auto; z-index: 98; opacity: 0.95; border-radius: 8px; }

@keyframes pshift {
    /* 第1张图: 从0%到约5.7%停留 */
    0%, 5.7% { margin-left: 0; }
    /* 切换到第2张图 */
    6.3% { margin-left: -900px; }

    /* 第2张图: 从6.3%到12%停留 */
    6.3%, 12% { margin-left: -900px; }
    /* 切换到第3张图 */
    12.6% { margin-left: -1800px; }

    /* 第3张图: 从12.6%到18.3%停留 */
    12.6%, 18.3% { margin-left: -1800px; }
    /* 切换到第4张图 */
    18.9% { margin-left: -2700px; }

    /* 第4张图: 从18.9%到24.6%停留 */
    18.9%, 24.6% { margin-left: -2700px; }
    /* 切换到第5张图 */
    25.2% { margin-left: -3600px; }

    /* 第5张图: 从25.2%到30.9%停留 */
    25.2%, 30.9% { margin-left: -3600px; }
    /* 切换到第6张图 */
    31.5% { margin-left: -4500px; }

    /* 第6张图: 从31.5%到37.2%停留 */
    31.5%, 37.2% { margin-left: -4500px; }
    /* 切换到第7张图 */
    37.8% { margin-left: -5400px; }

    /* 第7张图: 从37.8%到43.5%停留 */
    37.8%, 43.5% { margin-left: -5400px; }
    /* 切换到第8张图 */
    44.1% { margin-left: -6300px; }

    /* 第8张图: 从44.1%到49.8%停留 */
    44.1%, 49.8% { margin-left: -6300px; }
    /* 切换到第9张图 */
    50.4% { margin-left: -7200px; }

    /* 第9张图: 从50.4%到56.1%停留 */
    50.4%, 56.1% { margin-left: -7200px; }
    /* 切换到第10张图 */
    56.7% { margin-left: -8100px; }

    /* 第10张图: 从56.7%到62.4%停留 */
    56.7%, 62.4% { margin-left: -8100px; }
    /* 切换到第11张图 */
    63% { margin-left: -9000px; }

    /* 第11张图: 从63%到68.7%停留 */
    63%, 68.7% { margin-left: -9000px; }
    /* 切换到第12张图 */
    69.3% { margin-left: -9900px; }

    /* 第12张图: 从69.3%到75%停留 */
    69.3%, 75% { margin-left: -9900px; }
    /* 切换到第13张图 */
    75.6% { margin-left: -10800px; }

    /* 第13张图: 从75.6%到81.3%停留 */
    75.6%, 81.3% { margin-left: -10800px; }
    /* 切换到第14张图 */
    81.9% { margin-left: -11700px; }

    /* 第14张图: 从81.9%到87.6%停留 */
    81.9%, 87.6% { margin-left: -11700px; }
    /* 切换到第15张图 */
    88.2% { margin-left: -12600px; }

    /* 第15张图: 从88.2%到93.9%停留 */
    88.2%, 93.9% { margin-left: -12600px; }
    /* 切换到第16张图 */
    94.5% { margin-left: -13500px; }

    /* 第16张图: 从94.5%到100%停留 */
    94.5%, 100% { margin-left: -13500px; }
}
</style>
<div id="outframe">
<div id="pichold">
<img src="https://www.yueyijyw.com/data/attachment/forum/202607/27/213532sz7qszrddjjtjjsz.jpg">
<img src="https://www.yueyijyw.com/data/attachment/forum/202607/27/213532pved5f0enycif53h.jpg">
<img src="https://www.yueyijyw.com/data/attachment/forum/202607/27/213532gl9f3ln5i9k9f5rq.jpg">
<imgsrc="https://www.yueyijyw.com/data/attachment/forum/202607/27/213532gl9f3ln5i9k9f5rq.jpg">
<img src="https://www.yueyijyw.com/data/attachment/forum/202607/27/213532m9q7r2m877j223et.jpg">
<img src="https://www.yueyijyw.com/data/attachment/forum/202607/27/213532h4e5e44o5gg48oys.jpg
">
<img src="https://www.yueyijyw.com/data/attachment/forum/202607/27/214040cbs53z2sx852csb8.jpg">
<img src="https://www.yueyijyw.com/data/attachment/forum/202607/27/214040n6vnyiqqq6fejxe6.jpg">
<img src="https://www.yueyijyw.com/data/attachment/forum/202607/27/214040a0is60h3ty3vi99t.jpg">
<img src="https://www.yueyijyw.com/data/attachment/forum/202607/27/214039s2u966gdgu64lmgg.jpg">
<img src="https://www.yueyijyw.com/data/attachment/forum/202607/27/214039kc3qwsba32cz3lq2.jpg">
<img src="https://www.yueyijyw.com/data/attachment/forum/202607/27/214510mmdq8a4ih2ayazdd.jpg">
<img src="https://www.yueyijyw.com/data/attachment/forum/202607/27/214510vd2uq55p531qq5rz.jpg">
<img src="https://www.yueyijyw.com/data/attachment/forum/202607/27/214510hynojnoryj0jwxfu.jpg">
<img src="https://www.yueyijyw.com/data/attachment/forum/202607/27/214511mn8nh6p4hz442jjb.jpg">
<img src="https://www.yueyijyw.com/data/attachment/forum/202607/28/202611bp1propp0c2pzr80.jpg">
<img src="https://www.yueyijyw.com/data/attachment/forum/202607/27/214510vd2uq55p531qq5rz.jpg">
</div>
<!-- 歌词层 -->
<div class="lyric-box">
    <div class="lyric-text" id="lyricContent"></div>
<!-- 音频 -->
<audio id="music" autoplay loop src="https://imgimg.qqdsw8.cn/view.php/a38c9f73188caa67a724c64abc4bba70.mp3"></audio>

<script>
//京歌《荷花赋》 LRC
const lrc = `
京歌《荷花赋》
袁慧琴 孟广禄 李胜素 于魁智
自古传诵爱莲说
年年岁岁发新荷
‌出淤泥不染
濯清涟不妖
荷花世界君子国
堂堂君子意如何
中华千载高品格
遭雷霆不惊
遇风雨不落
花鲜叶茂舞婆娑
心似莲花情似荷
迎风摇曳更婀娜
逢威武不屈
有富贵不奢
气节不灭志不折
田田莲叶鲜鲜荷
清气浩气共融合
中通偏有节
清廉守本色
神州万里爱莲歌
爱莲歌 爱莲歌
千家万户倡美德
同逢盛世赞美荷
唱不尽，唱不尽
不枝不蔓亭亭玉立
香远益清荷花万朵
天时地利共人和
`;

// 解析LRC
function parseLrc(lrcStr){
    let list = [];
    let reg = /\[(\d{2}):(\d{2})\.(\d{2})\](.+)/;
    lrcStr.split('\n').forEach(line=>{
      let res = line.match(reg);
      if(res){
            let m = parseInt(res);
            let s = parseInt(res);
            let ms = parseInt(res);
            let time = m*60 + s + ms/100;
            list.push({time,text:res});
      }
    });
    return list.sort((a,b)=>a.time-b.time);
}

const lyricList = parseLrc(lrc);
const lyricDom = document.getElementById('lyricContent');
const music = document.getElementById('music');
let curIndex = 0;

// 跟着音乐时间滚动歌词
function syncLyric(){
    let nowTime = music.currentTime;
    for(let i=0; i<lyricList.length; i++){
      if(nowTime >= lyricList.time){
            curIndex = i;
      }
    }
    lyricDom.innerText = lyricList.text;
    lyricDom.className = "lyric-text lyric-cur";
}

setInterval(syncLyric, 100);
</script>

杨帆 发表于 2026-7-28 22:19

好听好看，效果漂亮，谢谢枫丹老师精彩分享{:4_204:}

红影 发表于 2026-7-28 22:19

好漂亮的荷花，还看到有复瓣的呢。
欣赏枫丹好帖{:4_199:}

魏淑芬 发表于 2026-7-29 14:04

欣赏枫丹荷花摄影佳作，阅图方式新颖便捷，点赞！

霜染枫丹 发表于 2026-7-29 16:06

杨帆 发表于 2026-7-28 22:19
好听好看，效果漂亮，谢谢枫丹老师精彩分享

欢迎扬帆,感谢您的支持鼓励，下午好！{:4_204:}{:4_190:}

霜染枫丹 发表于 2026-7-29 16:08

红影 发表于 2026-7-28 22:19
好漂亮的荷花，还看到有复瓣的呢。
欣赏枫丹好帖

红影下午好~~这几种荷花是园子里特殊盆栽的品种，比较不常见，单独做个轮播图呈上。

感谢您的支持鼓励，恭祝夏安！{:4_204:}{:4_190:}

梦江南 发表于 2026-7-29 16:09

好拍摄，好制作，欣赏点赞！{:4_187:}

霜染枫丹 发表于 2026-7-29 16:13

魏淑芬 发表于 2026-7-29 14:04
欣赏枫丹荷花摄影佳作，阅图方式新颖便捷，点赞！

魏淑芬下午好，欢迎您！感谢您临帖赏评，是在莲花池的荷花展上拍的。恭祝夏安~~{:4_204:}{:4_190:}

霜染枫丹 发表于 2026-7-29 16:15

梦江南 发表于 2026-7-29 16:09
好拍摄，好制作，欣赏点赞！

梦江南下午好~~

感谢您的支持鼓励！祝您夏安！{:4_204:}{:4_190:}
页: [1]
查看完整版本: 莲花池荷花轮播