论坛 › 我行我摄 › 送你一支日光菊 摄影文案原创 轮播图

霜染枫丹 发表于 2026-5-26 20:03

送你一支日光菊 摄影文案原创 轮播图

本帖最后由 霜染枫丹 于 2026-5-26 20:57 编辑


送你一支日光菊   
摄影文案制作：霜染枫丹
人间温柔万千
我独撷一束浅浅日光，折成一枝细碎的菊，赠予你。
       钟情于日光菊的缱绻温柔，它从不张扬，不与繁花争春，不随落木悲秋，只是安静地扎根泥土，迎着朝暮天光，静静盛放。如同藏在心底最深的情愫，从不喧嚣，却岁岁绵长，这便是它独有的花语——沉默的爱，与不变的温暖守望。
       送你一支日光菊，送你一场不落幕的晴天。
       它的花瓣是揉碎的落日余晖，薄薄的、软软的，带着阳光最温柔的温度，浅浅金黄，不染浮华，干净得如同初见。花蕊藏着细碎的温柔，像我藏在心底、未曾说出口的惦念。世间太多爱意轰轰烈烈，来去匆匆，而日光菊的温柔，是细水长流的陪伴，是不动声色的偏爱。
      我把这枝日光菊递到你掌心，愿你不必借世间万般光亮取暖，你手中这束小小繁花，便足以抵御人间寒凉。
      日光菊向阳而生，朝朝暮暮追随着光，哪怕风雨过境，也会在天晴之时，重新舒展花瓣，拥抱暖阳。它带着坚韧与温柔，告诉世人：平凡的生命里，自有生生不息的希望。这也是我想赠予你的期许——愿你纵使历经烟火疲惫，依旧心向光明，温柔纯粹。不喧哗，不热烈，却岁岁常青，日日向阳。       它不像情话那般动听，却比情话更为绵长，是藏在时光里的默默守护，是无需言说的岁岁安康。
往后岁月漫长，且以一枝日光菊，赠你岁岁光明。风来有风的温柔，雨来有雨的清欢。春有繁花相伴，冬有暖意绵长，往后余生，岁岁向阳，步步温柔，永远被时光温柔以待，永远热爱烟火人间。

霜染枫丹 发表于 2026-5-26 20:29

本帖最后由 霜染枫丹 于 2026-5-26 21:14 编辑 <br /><br />
<style>
    .pa { left: calc(50% - 81px); width: 1200px; min-height: 640px; transform: translateX(-50%); background: #F1FAEF; position: relative; }
    .pa img { display: block; margin: 10px 0; width: 100%; }
</style>

<div class="pa">
    <img src="https://www.yueyijyw.com/data/attachment/forum/202605/26/192838gbj4infizf9g48wg.jpg" alt="" />

    <img src="https://www.yueyijyw.com/data/attachment/forum/202605/26/192839s6ji16yjya5aqfyi.jpg" alt="" />

    <img src="https://www.yueyijyw.com/data/attachment/forum/202605/26/192840h5uu88n51550kyyk.jpg" alt="" />

    <img src="https://www.yueyijyw.com/data/attachment/forum/202605/26/192841vud7pduo7eyyu77g.jpg" alt="" />

    <img src="https://www.yueyijyw.com/data/attachment/forum/202605/26/192842k8u2pvu6akdt0zak.jpg" alt="" />

    <img src="https://www.yueyijyw.com/data/attachment/forum/202605/26/192843ggsynssylsrgrpy1.jpg" alt="" />

</div>

梦江南 发表于 2026-5-26 20:49

问好版主，文案写得诗一样美，下面的图片不知为什么没出来？

霜染枫丹 发表于 2026-5-26 20:53

梦江南 发表于 2026-5-26 20:49
问好版主，文案写得诗一样美，下面的图片不知为什么没出来？

发上来看到很正常，现在又不正常了，弄不懂是网速问题还是模板运行问题。这羞答答的劲头让人头大{:4_173:}{:4_190:}

霜染枫丹 发表于 2026-5-26 20:56

<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/26/6a1582c25757f.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/3f28b30d1a92ba15785e1d474ba475cf.mp3"></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://www.yueyijyw.com/data/attachment/forum/202605/26/192838gbj4infizf9g48wg.jpg",
    "https://www.yueyijyw.com/data/attachment/forum/202605/26/192839s6ji16yjya5aqfyi.jpg",
    "https://www.yueyijyw.com/data/attachment/forum/202605/26/192840h5uu88n51550kyyk.jpg",
    "https://www.yueyijyw.com/data/attachment/forum/202605/26/192841vud7pduo7eyyu77g.jpg",
    "https://www.yueyijyw.com/data/attachment/forum/202605/26/192842k8u2pvu6akdt0zak.jpg",
    "https://www.yueyijyw.com/data/attachment/forum/202605/26/192843ggsynssylsrgrpy1.jpg",
    "https://www.yueyijyw.com/data/attachment/forum/202605/26/192953vwqdth5tdzh0m098.jpg",
    "https://www.yueyijyw.com/data/attachment/forum/202605/26/192953nz2j6rww5zzl5wwn.jpg",
    "https://www.yueyijyw.com/data/attachment/forum/202605/26/192954wq6z3ynvp3086m7y.jpg",
    "https://www.yueyijyw.com/data/attachment/forum/202605/26/192955rhv6uuhughy7llcc.jpg",
    "https://www.yueyijyw.com/data/attachment/forum/202605/26/192956d7k6ae5byuu5b5z7.jpg",
    "https://www.yueyijyw.com/data/attachment/forum/202605/26/192956pddsp6dsznsikbd6.jpg",
    "https://www.yueyijyw.com/data/attachment/forum/202605/26/193052q5wda4mdskuz0utt.jpg",
    "https://www.yueyijyw.com/data/attachment/forum/202605/26/193053tfyqd5ug9f5khyag.jpg",
    "https://www.yueyijyw.com/data/attachment/forum/202605/26/193054d4bpjnkp4pakg15k.jpg",
    "https://www.yueyijyw.com/data/attachment/forum/202605/26/193056nywdb2pc4wp3bdwf.jpg",
    "https://www.yueyijyw.com/data/attachment/forum/202605/26/193057ld0006a0s5jzaksr.jpg",
    "https://www.yueyijyw.com/data/attachment/forum/202605/26/193058zuwvcuwwcv9wck9b.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-26 20:58

霜染枫丹 发表于 2026-5-26 20:53
发上来看到很正常，现在又不正常了，弄不懂是网速问题还是模板运行问题。这羞答答的劲头让人头大{:4_173: ...

看看别人怎么说，也许是我的浏览器关系。

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

本帖最后由 霜染枫丹 于 2026-5-26 21:16 编辑

梦江南 发表于 2026-5-26 20:58
看看别人怎么说，也许是我的浏览器关系。
我自己现在也看不见{:4_173:}

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

梦江南 发表于 2026-5-26 20:58
看看别人怎么说，也许是我的浏览器关系。

可能是网速问题，现在能看到了我这里{:4_204:}

梦江南 发表于 2026-5-26 21:18

我仍然看不到。

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

梦江南 发表于 2026-5-26 21:18
我仍然看不到。

我这回图片没敢多用，也进行了压缩，我的判断就是网速不达标。应该您那里没什么不对的，您的视频能放好的显示。图片毕竟是高清，文件还是大了些

也曾年轻 发表于 2026-5-26 22:00

霜染枫丹 发表于 2026-5-26 20:56
#showSVG {
    width:80vmax;
    height:45vmax;


https://5b0988e595225.cdn.sohucs.com/images/20181210/fcb3ffc680b741d3a913594743fbe297.gif

霜染枫丹 发表于 2026-5-26 22:37

也曾年轻 发表于 2026-5-26 22:00


也曾年轻晚上好！特别喜欢您制作的这种轮播图方式看照片，保证了画质，同时也带了来衍生的效果。

感谢您的支持，祝您安好~~{:4_204:}{:4_190:}

红影 发表于 2026-5-27 20:24

原来这花叫日光菊，看到过，还不知道叫这名字呢。
枫丹的文字好美，制作也美，很赞{:4_199:}

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

红影 发表于 2026-5-27 20:24
原来这花叫日光菊，看到过，还不知道叫这名字呢。
枫丹的文字好美，制作也美，很赞

红影晚上好~~

这是一种外来入侵的物种，一开始想阻止蔓延，后来发现花期长，危害不大，现在作为绿化的植物很多地方都有了。
感谢您的支持，夏安~~{:4_204:}{:4_190:}

查看完整版本: 送你一支日光菊 摄影文案原创 轮播图