圆明园九州景区桑榆小满岁月安然（原创摄影图文） - 第2页 - 我行我摄 - 花潮论坛

霜染枫丹 发表于 2026-5-22 12:44

樵歌发表于 2026-5-22 11:50
开篇就以风为媒，/风把夕阳揉成柔软的披肩！真是神来之笔！首先就定下温润的基调。
然后将小满的自然物象 ...

到了我这个年纪，真是的感受就是很觉得小满及丰盈。放下了那些奋斗的理念，过去已去，未来已来，珍惜当下。

本来这是一组照片的推拉轮播图，我把文字转化为语音制作成了LRC歌词，但是怎么修整都是不能居中，只好放弃，之所以选择这组图片，就是感觉当年八国联军把这里烧成了一片废墟，现在依然秀美。那么，遗憾也就是小满未满的所在，接受了，向前看。
特别感谢小樵哥的鼓励支持！祝您夏安~~{:4_204:}{:4_190:}

霜染枫丹 发表于 2026-5-22 12:50

樵歌发表于 2026-5-22 11:51
我好久不来，因为各种事情和小恙不断等，问好大姐

谢谢小樵哥的问候，很荣幸！每个论坛都有各自的特色，我喜欢花潮的实在不花哨，就愿意在这里把帖子尽量写好，让自己过段时间再看也不会觉得当时是在敷衍。到了雨季，小樵哥多保重，减少外出，注意安全！
https://cccimg.com/view.php/c8e606c8f67f703213d7138c756ade23.gif

霜染枫丹 发表于 2026-5-22 13:16

樵歌发表于 2026-5-22 11:52
片片没得说，美矣！文字可以分段的。

是应该分段，现代诗也需要一个节律，制作歌词是打乱了。发帖就没再整理{:4_173:}{:4_190:}

梦油发表于 2026-5-22 13:58

霜染枫丹发表于 2026-5-21 20:26
梦老晚上好~~感谢您的支持。先做的轮播图我做不到居中，就从坑里跳出来了，把图片呈上。祝您小 ...

这图已经做得很好了。

樵歌发表于 2026-5-22 20:45

霜染枫丹发表于 2026-5-22 12:44
到了我这个年纪，真是的感受就是很觉得小满及丰盈。放下了那些奋斗的理念，过去已去，未来已来，珍惜当下 ...

用还你教我的那剪映来作呗，我现在发觉用剪映做方便，只是做时要把手机放架子上，把架子调到与眼睛齐平，这样不伤颈椎，不然平着做久了头要晕。
我发觉电脑剪映与手机剪映功能不一样，手机的多好多。

樵歌发表于 2026-5-22 20:49

霜染枫丹发表于 2026-5-22 12:50
谢谢小樵哥的问候，很荣幸！每个论坛都有各自的特色，我喜欢花潮的实在不花哨，就愿意在这里把帖子尽量写 ...

谢谢大姐一直以前的关心，很感动。我们干休所前一阵组织到河北红色旅游十多天，全是去红色景点，片片都没拍好。前天才回来。
大姐这样的做法很对，让自己的生活充实而有意义，文化生活本身誻定神享受，祝大姐开心健康！{:4_204:}

樵歌发表于 2026-5-22 20:52

霜染枫丹发表于 2026-5-22 13:16
是应该分段，现代诗也需要一个节律，制作歌词是打乱了。发帖就没再整理

我没听到歌，我电脑重装后，可能用的浏览器不以地，是“好123”，我不知道哪个好。

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

本帖最后由霜染枫丹于 2026-5-23 15:59 编辑 <br /><br /><style>
/* 整体容器 - 1200x800，相机标准比例 */
#showSVG {
width: 800px;
height: 533px;
position: relative;
margin: 20px auto;
overflow: hidden;
border-radius: 24px;
background-color: #e8e4d8;
box-shadow: 4px 4px 10px black;
}

/* 轮播图片容器 */
.carousel-container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}

/* 每张图片的独立容器 */
.slide {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
z-index: 1;
}

/* 当前活动的幻灯片 */
.slide.active {
opacity: 1;
z-index: 2;
}

/* 关键：图片完美居中、铺满容器、不变形 */
.slide img {
width: 100%;
height: 100%;
object-fit: cover;/* 确保图片覆盖整个区域，保持比例裁剪 */
display: block;
}

/* 暗影层，增强歌词可读性 */
.shadow-layer {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
z-index: 3;
pointer-events: none;
}

/* 左上角LOGO */
.logo-top {
position: absolute;
left: 20px;
top: 20px;
width: 140px;
height: auto;
z-index: 10;
opacity: 0.95;
border-radius: 8px;
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: 10;
}

.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;
}

/* 指示点容器 */
.dots {
position: absolute;
bottom: 85px;
left: 0;
width: 100%;
display: flex;
justify-content: center;
gap: 12px;
z-index: 10;
}

.dot {
width: 10px;
height: 10px;
background-color: rgba(255,255,255,0.5);
border-radius: 50%;
cursor: pointer;
transition: 0.3s;
}

.dot.active {
background-color: #ffedaa;
transform: scale(1.2);
}
</style>

<div id="showSVG">

<div id="carouselContainer" class="carousel-container"></div>


<div class="shadow-layer"></div>


<img class="logo-top" src="https://ff.xiaoqiaodali.top:5401/i/2026/05/23/6a114b553a615.png" alt="Logo">


<div class="lyric-box">
   <div class="lyric-text" id="lyricContent"></div>
</div>


<div class="dots" id="dotsContainer"></div>
</div>


<audio id="music" autoplay loop src="http://cccimg.com/view.php/3befcfd685ab53e5b7fbf874a4ed1f55.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;
}

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;
let activeIndex = 0;
for (let i = 0; i < lyricList.length; i++) {
   if (nowTime >= lyricList.time) activeIndex = i;
}
if (activeIndex !== curIndex) {
   curIndex = activeIndex;
   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 });

// ==================== 独立轮播功能 ====================
const pics = [
"https://www.yueyijyw.com/data/attachment/forum/202604/14/193306rddhizb7kbimvbgz.jpg",
"https://www.yueyijyw.com/data/attachment/forum/202604/14/193306boz1cs5sw1tck2c1.jpg",
"https://www.yueyijyw.com/data/attachment/forum/202604/14/193306se5ax67oeqao8pft.jpg",
"https://www.yueyijyw.com/data/attachment/forum/202604/14/193306oz8zqdmevmjm233x.jpg",
"https://www.yueyijyw.com/data/attachment/forum/202604/14/193307gpjpakjzalyohxty.jpg",
"https://www.yueyijyw.com/data/attachment/forum/202604/14/193307pcfbutppp55vpvep.jpg",
"https://www.yueyijyw.com/data/attachment/forum/202604/14/193418imwsc8w08flzm303.jpg",
"https://www.yueyijyw.com/data/attachment/forum/202604/14/193418zdce63v5c569559t.jpg",
"https://www.yueyijyw.com/data/attachment/forum/202604/14/193419mas7auchujjjwwwj.jpg",
"https://www.yueyijyw.com/data/attachment/forum/202604/14/193419bmre6pkecbejpcir.jpg",
"https://www.yueyijyw.com/data/attachment/forum/202604/14/193419uaja72azxa57jg2g.jpg",
"https://www.yueyijyw.com/data/attachment/forum/202604/14/193420w0zz3wg9i6zl9vgz.jpg",
"https://www.yueyijyw.com/data/attachment/forum/202604/14/193553zjbdbbg9nsg9djjg.jpg",
"https://www.yueyijyw.com/data/attachment/forum/202604/14/193553s8dwh0od8ksu0iho.jpg",
"https://www.yueyijyw.com/data/attachment/forum/202604/14/193553il7yifffdfnyiqru.jpg",
"https://www.yueyijyw.com/data/attachment/forum/202604/14/193554l0x5ppvp95xzq98a.jpg",
"https://www.yueyijyw.com/data/attachment/forum/202604/14/193554pxxcyr3sy91yfcff.jpg",
"https://www.yueyijyw.com/data/attachment/forum/202604/14/193651bfj3i6ii6iyzu76m.jpg",
"https://www.yueyijyw.com/data/attachment/forum/202604/14/193651iafffa7zfgtzcaza.jpg",
"https://www.yueyijyw.com/data/attachment/forum/202604/14/193651gror2bbvol25xuoh.jpg",
];

let currentSlide = 0;
let slideInterval;

function initCarousel() {
const container = document.getElementById('carouselContainer');
const dotsContainer = document.getElementById('dotsContainer');
if (!container) return;

container.innerHTML = '';
dotsContainer.innerHTML = '';

// 创建幻灯片和指示点
pics.forEach((picUrl, index) => {
   // 创建slide div
   const slide = document.createElement('div');
   slide.className = 'slide';
   if (index === 0) slide.classList.add('active');

   // 创建img元素
   const img = document.createElement('img');
   img.src = picUrl;
   img.alt = `轮播图片 ${index + 1}`;
   img.onerror = () => console.log(`图片加载失败: ${picUrl}`);

   slide.appendChild(img);
   container.appendChild(slide);

   // 创建指示点
   const dot = document.createElement('div');
   dot.className = 'dot';
   if (index === 0) dot.classList.add('active');
   dot.addEventListener('click', () => goToSlide(index));
   dotsContainer.appendChild(dot);
});

// 启动自动轮播
startAutoPlay();
}

function goToSlide(index) {
// 更新幻灯片
const slides = document.querySelectorAll('.slide');
const dots = document.querySelectorAll('.dot');

if (index >= slides.length) index = 0;
if (index < 0) index = slides.length - 1;

slides.forEach((slide, i) => {
   if (i === index) {
         slide.classList.add('active');
   } else {
         slide.classList.remove('active');
   }
});

dots.forEach((dot, i) => {
   if (i === index) {
         dot.classList.add('active');
   } else {
         dot.classList.remove('active');
   }
});

currentSlide = index;

// 重置定时器
resetAutoPlay();
}

function nextSlide() {
goToSlide(currentSlide + 1);
}

function startAutoPlay() {
if (slideInterval) clearInterval(slideInterval);
slideInterval = setInterval(nextSlide, 5000); // 5秒切换
}

function resetAutoPlay() {
if (slideInterval) clearInterval(slideInterval);
startAutoPlay();
}

// 等待页面加载完成启动轮播
document.addEventListener('DOMContentLoaded', initCarousel);
</script>

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

樵歌发表于 2026-5-22 20:52
我没听到歌，我电脑重装后，可能用的浏览器不以地，是“好123”，我不知道哪个好。

这个帖子里没有歌声，没添加音乐。原本发上来的是推拉循环的轮播图+歌词歌曲，在我那里正常，在这里就是不能居中，就放弃了，后来也曾年轻在这里发了画面不动过场转换的轮播图，比推拉的精致，我就把自己的文字制作成LRC歌词添加了进来，制作完毕重新发了一个帖子。

https://www.huachaowang.com/forum.php?mod=viewthread&tid=93094&extra=

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

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

樵歌发表于 2026-5-22 20:52
我没听到歌，我电脑重装后，可能用的浏览器不以地，是“好123”，我不知道哪个好。
我用的浏览器有2个，极速浏览器和谷歌浏览器，好123没用过。极速浏览器可能也是谷歌内核，很好用，有一些扩展。首页我用的是谷歌265上网导航，基本没广告，挺干净的。极速浏览器不是360的那个极速，360事情太多，我不喜欢用。https://www.265.com/

https://jisu.hen360.com/?bd_vid=10100232287465457018

红影发表于 2026-5-22 22:58

霜染枫丹发表于 2026-5-21 23:03
谢红影的支持！我用也曾年轻给我的轮播图重新制作了一下，看看这次能否加载成功，都显示出来，试验是没问 ...

枫丹的摄影那么好，再有好的代码，真的如虎添翼呢{:4_187:}

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

红影发表于 2026-5-22 22:58
枫丹的摄影那么好，再有好的代码，真的如虎添翼呢

现在也没有什么正经的事情做，就是瞎玩，有心办法就试试。用轮播图的办法挺理想的，现在是我用的照片没压缩，20多付照片传上来有点慢。明天我试试将照片压缩一下，应该不会影响在屏幕看片，也说不好，试试找个合适的数值，玩起来就简单了{:4_204:}{:4_190:}

红影发表于 2026-5-22 23:34

霜染枫丹发表于 2026-5-22 23:15
现在也没有什么正经的事情做，就是瞎玩，有心办法就试试。用轮播图的办法挺理想的，现在是我用的照片没压 ...

是的，应该压缩一下，屏幕本来就不大，不需要那么高像素，可以降低点文件就小了。

页: 1 [2]

花潮论坛's Archiver