霜染枫丹 发表于 2026-5-21 23:10

图片轮播图添加歌词LOGO试贴


<meta charset="utf-8">
<style>
#showSVG {
    width:80vmax;
    height:45vmax;
    position:relative;
    margin-left:calc(50% - 40vmax);
    overflow:hidden;
    border-radius:24px;
    background-color:hsl(60, 15%, 90%);
    box-shadow:4px 4px 10px black;
}

/* 轮播背景层容器 */
.carousel-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* 左上角LOGO - 固定不被覆盖 */
.logo-top {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 140px;
    height: auto;
    z-index: 100;
    opacity: 0.95;
    border-radius: 8px;
    pointer-events: none;
}

/* 全屏半透明暗影 - 固定在LOGO之上 */
.shadow-layer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 90;
    background: rgba(0,0,0,0.22);
    pointer-events: none;
}

/* 底部歌词 - 固定在最上层 */
.lyric-box {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 25px 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.65));
    text-align: center;
    pointer-events: none;
    z-index: 100;
}
.lyric-text {
    color: #f8f8f8;
    font-size: 20px;
    line-height: 2.4;
    letter-spacing: 3px;
    text-shadow: 1px 2px 4px #000;
}
.lyric-cur {
    color: #ffedaa;
    font-size: 23px;
    font-weight: 500;
}
</style>

<div id="showSVG">
    <!-- 背景轮播会动态渲染到此容器中 -->
    <div id="carouselContainer" class="carousel-bg"></div>
   
    <!-- 左上角LOGO - 固定不受轮播影响 -->
    <img class="logo-top" src="https://ff.xiaoqiaodali.top:5401/i/2026/05/21/6a0ed0042312c.png" alt="Logo">
   
    <!-- 全屏暗影层 - 半透明遮罩 -->
    <div class="shadow-layer"></div>
   
    <!-- 底部歌词 - 固定不动 -->
    <div class="lyric-box">
      <div class="lyric-text" id="lyricContent"></div>
    </div>
</div>

<!-- 背景音乐 -->
<audio id="music" autoplay loop src="http://cccimg.com/view.php/1033249a3346efbb0858174159a6ace2.m4a"></audio>

<script>
// ==================== 歌词功能 ====================
const 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: 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() {
    if (!music) return;
    let nowTime = music.currentTime;
    for (let i = 0; i < lyricList.length; i++) {
      if (nowTime >= lyricList.time) curIndex = i;
    }
    if (lyricList) {
      lyricDom.innerText = lyricList.text;
      lyricDom.className = "lyric-text lyric-cur";
    }
}
setInterval(syncLyric, 100);

// 确保音乐自动播放（浏览器可能限制，需要用户交互）
document.body.addEventListener('click', function() {
    if (music.paused) {
      music.play().catch(e => console.log('自动播放被阻止，需要用户交互'));
    }
}, { once: true });

// ==================== 轮播功能（只渲染到 carouselContainer 容器中，不影响外层固定元素）====================
const pics = [
    "https://ff.xiaoqiaodali.top:5401/i/2026/05/01/69f4b5cdb3889.jpg",
    "https://ff.xiaoqiaodali.top:5401/i/2026/05/01/69f4b5cec3cb5.jpg",
    "https://ff.xiaoqiaodali.top:5401/i/2026/05/01/69f4b5d169ae6.jpg",
    "https://ff.xiaoqiaodali.top:5401/i/2026/05/01/69f4b5d4385c5.jpg",
    "https://ff.xiaoqiaodali.top:5401/i/2026/05/01/69f4b5d7cf2de.jpg",
    "https://ff.xiaoqiaodali.top:5401/i/2026/05/01/69f4b5db045e9.jpg",
    "https://ff.xiaoqiaodali.top:5401/i/2026/05/01/69f4b5de68c57.jpg",
    "https://ff.xiaoqiaodali.top:5401/i/2026/05/01/69f4b5dfd0613.jpg",
    "https://ff.xiaoqiaodali.top:5401/i/2026/05/01/69f4b5e094d1a.jpg",
    "https://ff.xiaoqiaodali.top:5401/i/2026/05/01/69f4b5e0a303d.jpg",
    "https://ff.xiaoqiaodali.top:5401/i/2026/05/01/69f4c02752080.jpg",
    "https://ff.xiaoqiaodali.top:5401/i/2026/05/01/69f4c0285630e.jpg",
    "https://ff.xiaoqiaodali.top:5401/i/2026/05/01/69f4c029d9384.jpg",
    "https://ff.xiaoqiaodali.top:5401/i/2026/05/01/69f4c02b80a0c.jpg",
    "https://ff.xiaoqiaodali.top:5401/i/2026/05/01/69f4c02c32790.jpg",
    "https://ff.xiaoqiaodali.top:5401/i/2026/05/01/69f4c02f2ff1a.jpg",
    "https://ff.xiaoqiaodali.top:5401/i/2026/05/01/69f4c033b172f.jpg",
    "https://ff.xiaoqiaodali.top:5401/i/2026/05/01/69f4c036d117f.jpg",
    "https://ff.xiaoqiaodali.top:5401/i/2026/05/01/69f4c03eaec6a.jpg",
    "https://ff.xiaoqiaodali.top:5401/i/2026/05/01/69f4c04103403.jpg",
    "https://ff.xiaoqiaodali.top:5401/i/2026/05/01/69f4c0425bd73.jpg",
    "https://ff.xiaoqiaodali.top:5401/i/2026/05/01/69f4c042c9e3e.jpg",
    "https://ff.xiaoqiaodali.top:5401/i/2026/05/01/69f4c04409f79.jpg",
    "https://ff.xiaoqiaodali.top:5401/i/2026/05/01/69f4c0452485b.jpg",
    "https://ff.xiaoqiaodali.top:5401/i/2026/05/01/69f4c04215ab9.jpg",
];

function loadJs(url, callback) {
    var script = document.createElement('script');
    script.charset = 'utf-8';
    script.src = url;
    script.onload = function() {
      if (callback) callback();
    };
    document.head.appendChild(script);
}

let doAction = () => {
    let picArr = [], errCount = 0;
    let container = document.getElementById('carouselContainer');

    let getPictureSize = (url, pIdx) => {
      let img = new Image();
      img.onerror = () => {
            console.log(url + " 图片加载失败，请检查url是否正确");
            errCount++;
      };
      img.onload = () => {
            picArr.push({ 'index': pIdx, 'url': url, 'width': img.width, 'height': img.height });
            img.onload = null;
      }
      img.src = url;
    }

    let dataReady = () => {
      if (picArr.length != (pics.length - errCount)) {
            setTimeout(dataReady, 50);
      } else {
            picArr.sort(function(a, b) {
                return (a.index - b.index);
            });
            let opts = {
                width: showSVG.offsetWidth,
                height: showSVG.offsetHeight,
                showObj: container,// 将轮播渲染到独立容器中
                picAr: picArr
            };
            new mkSVGPics(opts).makeSVGsegment();
      }
    }

    pics.forEach((url, pIdx) => getPictureSize(url, pIdx));
    dataReady();
}

loadJs("https://cccimg.com/down.php/af4d73a4781cb57f0e3e784a7383e369.js", doAction);
</script>

霜染枫丹 发表于 2026-5-21 23:16

很喜欢也曾年轻做的轮播图，用轮播图展示照片画质没有损失。于是用也曾年轻的轮播图代码添加了歌词和logo，能够很好的显示，特别高兴。谢谢也曾年轻！

之前用推拉的轮播图制作的帖子，我学艺不精，想了我能想到的办法都没调整好。感觉固定轮播图比推拉的更静美，更能更好的欣赏照片。多了一项展示手法很高兴，㊗️大家小满快乐！

霜染枫丹 发表于 2026-5-21 23:23

本帖最后由 霜染枫丹 于 2026-5-21 23:26 编辑 <br /><br />{:4_204:} {:4_204:} {:4_204:}

杨帆 发表于 2026-5-21 23:27

别出心裁，效果漂亮，谢谢霜染枫丹老师精彩分享{:4_204:}

霜染枫丹 发表于 2026-5-21 23:34

杨帆 发表于 2026-5-21 23:27
别出心裁，效果漂亮，谢谢霜染枫丹老师精彩分享
杨帆晚上好！上个轮播图我就是没弄好。很感谢您的支持，这样没事的时候又能多了一项玩的形式。也曾年轻的轮播图特漂亮，就想用，很感谢。祝杨帆小满快乐~~



页: [1]
查看完整版本: 图片轮播图添加歌词LOGO试贴