原创梅花摄影轮播

霜染枫丹 发表于 2026-6-16 21:17

https://s3.bmp.ovh/2026/06/16/15AtGHvD.jpg

霜染枫丹 发表于 2026-6-16 21:41

也曾年轻 发表于 2026-6-16 22:05

霜染枫丹发表于 2026-6-16 21:41
#papa{
margin: 50px auto;
width: 1024px;

霜染枫丹 发表于 2026-6-16 22:08

也曾年轻发表于 2026-6-16 22:05

在这里1400X788不能居中，我试了2次没成功，我就改小了。

感谢也曾年轻的鼓励，祝您安好~~{:4_204:}{:4_190:}

也曾年轻 发表于 2026-6-16 22:15

本帖最后由霜染枫丹于 2026-6-16 22:22 编辑 <br /><br />霜染枫丹发表于 2026-6-16 22:08
在这里1400X788不能居中，我试了2次没成功，我就改小了。

感谢也曾年轻的鼓励，祝您安好~~{: ...

没看到居中的代码呀。
<img src="https://ff.xiaoqiaodali.top:5401/i/2026/04/28/69f06356b2e46.jpg"
style="width:1440px;position:relative;margin:32px auto 32px calc(50% - 801px);" />

霜染枫丹 发表于 2026-6-16 22:19

本帖最后由霜染枫丹于 2026-6-16 22:30 编辑 <br /><br /><style>
#papa{
margin:50px auto 32px calc(50% - 781px);
width: 1400px;
height: 788px;
background: gray url('https://ff.xiaoqiaodali.top:5401/i/2026/04/28/69f0635b01c59.jpg') center/cover no-repeat;
box-shadow: 3px 3px 20px #000;
position: relative;
z-index: 1;
--state: running;
overflow:hidden;
}
#vid {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
object-fit: cover;
opacity: 1;
filter:contrast(120%);
transform: scale(1.1, 1.1);
transform-origin: center center;
}
#photo img {
   width: 100%;
   height: 100%;
   position: absolute;
   border: 0px solid #000000;
   top: 0px;
   left: 0px;
   filter: contrast(150%)brightness(100%);
   -webkit-mask-image:radial-gradient(black 100%,transparent 100%);
   opacity: 0;
   animation-name: round;
   animation-duration: 48s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
/* 核心居中修复 */
object-fit: cover;
transform-origin: center center;
}
/* 修复动画：全程以中心缩放，不左右偏移 */
@keyframes round {
0% {
opacity: 0;
transform: translate(-50%,-50%) scale(0);
top: 50%;
left: 50%;
}
5% {
opacity: 1;
transform: translate(-50%,-50%) scale(0);
top: 50%;
left: 50%;
}
14% {
opacity: 1;
transform: translate(-50%,-50%) scale(1);
top: 50%;
left: 50%;
}
16% {
opacity: 1;
transform: translate(-50%,-50%) scale(1);
top: 50%;
left: 50%;
}
24% {
opacity: 0;
transform: translate(-50%,-50%) scale(1);
top: 50%;
left: 50%;
}
}

#photo img:nth-child(10) { animation-delay: 54s; }
#photo img:nth-child(9) { animation-delay: 48s; }
#photo img:nth-child(8) { animation-delay: 42s; }
#photo img:nth-child(7) { animation-delay: 36s; }
#photo img:nth-child(6) { animation-delay: 30s; }
#photo img:nth-child(5) { animation-delay: 24s; }
#photo img:nth-child(4) { animation-delay: 18s; }
#photo img:nth-child(3) { animation-delay: 12s; }
#photo img:nth-child(2) { animation-delay: 6s; }
#photo img:nth-child(1) { animation-delay: 0s; }

/* 歌词容器样式 */
#lrcBox{
position: absolute;
left: 50%;
top: 82%;
transform: translateX(-50%);
width: 800px;
height: 120px;
overflow: hidden;
z-index: 9999;
text-align: center;
pointer-events: none;
font-family: "华文隶书",sans-serif;
}
#lrcList{
transition: transform 0.5s ease;
}
.lrc-line{
font-size: 28px;
line-height: 40px;
color: rgba(255,255,255,0.6);
text-shadow: 1px 1px 3px #000;
}
.lrc-line.active{
color: #fff;
font-size: 32px;
font-weight: bold;
text-shadow: 0 0 8px #fff,2px 2px 4px #000;
}

#mplayer {
position: absolute;
width: 300px;
height: 300px;
left:90%;
z-index: 10;
top:80%;
mix-blend-mode:exclusion;
transform:perspective(0px) rotateY(0deg)rotateX(0deg)scale(1.0);
}
#an{
position: absolute;
top:0%;
left:0%;
width: 100%;
height:100%;
z-index: 5;
pointer-events: none;
}
@keyframes cover1{
0% { width: 100%;transform: rotateY(-180deg)rotatex(0deg);filter: hue-rotate(180deg)brightness(850%)drop-shadow(0 0 10px #fff000)}
20% { transform:rotateY(0deg) rotatex(0deg);filter: hue-rotate(360deg)brightness(350%)drop-shadow(0 0 8px #000080) }
100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(950%)drop-shadow(0 0 16px #ffffff);width: 100%;}
}
@keyframes cover2 {
0% { width: 100%;transform: rotateY(-180deg)rotatex(0deg);filter: hue-rotate(180deg)brightness(850%)drop-shadow(0 0 10px #fff000)}
20% { transform:rotateY(0deg) rotatex(0deg);filter: hue-rotate(360deg)brightness(350%)drop-shadow(0 0 8px #000080) }
100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(950%)drop-shadow(0 0 16px #ffffff);width: 100%;}
}

#fullscreen {
position: absolute;
top:5%;
left:85%;
color:#ffffff;
filter:drop-shadow( 1px 1px 1px #000000);
font: normal 2.0em 华文隶书;
opacity: 1;
cursor: pointer;
z-index: 9999;
}

/* 新增：音频控制按钮样式 */
#audioControl {
position: absolute;
bottom: 20px;
right: 20px;
width: 60px;
height: 60px;
z-index: 10000;
cursor: pointer;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
transition: transform 0.3s ease;
}

#audioControl:hover {
transform: scale(1.1);
}

#audioControl.playing {
animation: rotate 2s linear infinite;
}

@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

#audioControl img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}

/* 轮播标题居中补充样式 */
#carouselTitle{
position: absolute;
top:30px;
left:50%;
transform: translateX(-50%);
font-family:华文隶书;
font-size:36px;
color:#fff;
text-shadow:2px 2px 6px #000;
z-index:99;
}
</style>

<div id="papa">
<span id="fullscreen"></span>


<div id="carouselTitle">梅花摄影展</div>

<video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/72/5b491dd2b9164.mp4" muted autoplay loop></video>

<div id="photo">
<img class="photo" src="https://ff.xiaoqiaodali.top:5401/i/2026/04/28/69f0635921759.jpg" />
<img class="photo" src="https://ff.xiaoqiaodali.top:5401/i/2026/04/28/69f0635a089fb.jpg" />
<img class="photo" src="https://ff.xiaoqiaodali.top:5401/i/2026/04/28/69f0634e70932.jpg" />
<img class="photo" src="https://ff.xiaoqiaodali.top:5401/i/2026/04/28/69f0634f69cdc.jpg" />
<img class="photo" src="https://ff.xiaoqiaodali.top:5401/i/2026/04/28/69f0635068c1f.jpg" />
<img class="photo" src="https://ff.xiaoqiaodali.top:5401/i/2026/04/28/69f063532e75a.jpg" />
<img class="photo" src="https://ff.xiaoqiaodali.top:5401/i/2026/04/28/69f063542ce28.jpg" />
<img class="photo" src="https://ff.xiaoqiaodali.top:5401/i/2026/04/28/69f063551806c.jpg" />
<img class="photo" src="https://ff.xiaoqiaodali.top:5401/i/2026/04/28/69f06355e19e6.jpg" />
<img class="photo" src="https://ff.xiaoqiaodali.top:5401/i/2026/04/28/69f06356b2e46.jpg" />
</div>

<div id="mydiv"></div>
<div id="img_border" ></div>


<div id="lrcBox">
<div id="lrcList"></div>
</div>

<div id="mplayer"></div>


<div id="audioControl" title="点击播放/暂停音乐">
<img src="https://ff.xiaoqiaodali.top:5401/i/2026/04/02/69ce16e493ac6.png" alt="音频控制">
</div>

</div>

<audio id="aud" src="https://cccimg.com/view.php/426b3fecad5b482db0fa365e9e10d7e5.mp3
" loop="">

<script>
// 《梅花赋》完整LRC歌词

const lrcText = `
梅花赋
歌手李军 / 梦苇-国风新古典
作曲王艺歌
编曲多剑平
（男）几度春风里
看花谢花开
含羞的春蕾令人爱
（女）这前世的缘怎能不在
今生呵护你永不残败
（合）倘若风雨他日来
枝叶凋零还有傲骨在
即便寒冷雪花飞
我伴梅花报春来
（男）一抹斜阳下
谁婀娜多彩
百媚千姿涂粉黛
（女）俏不争春立两岸
花香直挂云天外
（合）倘若风雨他日来
枝叶凋零还有傲骨在
即便寒冷雪花飞
我伴梅花报春来
（合）倘若风雨他日来
枝叶凋零还有傲骨在
即便寒冷雪花飞
我伴梅花报春来
`;

const aud = document.getElementById('aud');
const lrcList = document.getElementById('lrcList');
const audioControl = document.getElementById('audioControl');
let lrcArr = [];
let isPlaying = false; // 音频播放状态

// 解析LRC
function parseLRC(lrc){
let lines = lrc.trim().split('\n');
let res = [];
lines.forEach(line=>{
let reg = /\[(\d{2}):(\d{2})\.(\d{2})\](.*)/;
let m = line.match(reg);
if(!m) return;
let t = parseInt(m)*60 + parseInt(m) + parseInt(m)/100;
res.push({time:t,text:m});
});
return res;
}

// 生成歌词行
function initLRC(){
lrcArr = parseLRC(lrcText);
lrcList.innerHTML = '';
lrcArr.forEach(item=>{
let p = document.createElement('div');
p.className = 'lrc-line';
p.innerText = item.text;
lrcList.appendChild(p);
});
}

// 同步歌词滚动+高亮
function syncLRC(){
let curTime = aud.currentTime;
let idx = 0;
for(let i=0;i<lrcArr.length;i++){
if(curTime >= lrcArr.time) idx = i;
}
let lines = lrcList.querySelectorAll('.lrc-line');
lines.forEach((line,i)=>{
line.classList.toggle('active',i===idx);
});
// 歌词向上滚动居中
lrcList.style.transform = `translateY(-${idx*40}px)`;
}

// 新增：音频控制按钮点击事件
audioControl.addEventListener('click', function() {
if (isPlaying) {
aud.pause();
audioControl.classList.remove('playing');
} else {
aud.play().then(() => {
   audioControl.classList.add('playing');
}).catch(error => {
   console.log('音频播放失败:', error);
});
}
isPlaying = !isPlaying;
});

// 新增：音频事件监听，同步按钮状态
aud.addEventListener('play', function() {
isPlaying = true;
audioControl.classList.add('playing');
});

aud.addEventListener('pause', function() {
isPlaying = false;
audioControl.classList.remove('playing');
});

aud.addEventListener('ended', function() {
isPlaying = false;
audioControl.classList.remove('playing');
});

// 初始化歌词
initLRC();
aud.addEventListener('timeupdate',syncLRC);

// 尝试自动播放，由于浏览器限制可能需要用户交互
aud.play().then(() => {
isPlaying = true;
audioControl.classList.add('playing');
}).catch(error => {
console.log('自动播放被阻止，需要用户交互:', error);
isPlaying = false;
audioControl.classList.remove('playing');
});
</script>

换成这样不响应

也曾年轻 发表于 2026-6-16 22:24

霜染枫丹发表于 2026-6-16 22:19
本帖最后由霜染枫丹于 2026-6-16 22:20 编辑
#papa{
margin: 50px auto;

把 margin: 50px auto; 改成 margin:50px auto 32px calc(50% - 781px); 试试

霜染枫丹 发表于 2026-6-16 22:28

也曾年轻发表于 2026-6-16 22:24
把 margin: 50px auto; 改成 margin:50px auto 32px calc(50% - 781px); 试试

好的

霜染枫丹 发表于 2026-6-16 22:32

也曾年轻发表于 2026-6-16 22:24
把 margin: 50px auto; 改成 margin:50px auto 32px calc(50% - 781px); 试试

哈哈~~好使！我得收起来留着，单独给花潮的帖子用{:4_172:}{:4_204:}{:4_199:}{:4_199:}

霜染枫丹 发表于 2026-6-16 22:40

也曾年轻发表于 2026-6-16 22:24
把 margin: 50px auto; 改成 margin:50px auto 32px calc(50% - 781px); 试试
这个参数绝对正确，我在其他地方试了，特别漂亮~~第一次折腾这个放大的形式，您给调好了特别高兴，谢谢也曾年轻！！！

https://s3.bmp.ovh/2026/06/16/z5ouXYkD.jpg

红影发表于 2026-6-16 22:59

这些梅花拍得真美啊，欣赏枫丹好帖{:4_187:}

霜染枫丹 发表于 2026-6-16 23:12

红影发表于 2026-6-16 22:59
这些梅花拍得真美啊，欣赏枫丹好帖

今天晚上试了试放大展示的轮播，居中一直调不好，很感谢也曾年轻帮我修正过来了。相机拍的图片像素高，这样看清晰度就高一些。感谢红影的支持，晚上好！{:4_204:}{:4_190:}

杨帆发表于 2026-6-16 23:44

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

也曾年轻 发表于 2026-6-17 08:18

霜染枫丹发表于 2026-6-16 22:40
这个参数绝对正确，我在其他地方试了，特别漂亮~~第一次折腾这个放大的形式，您给调好了特别高兴，谢谢也 ...

以前多是估算左边的偏移量，后来看了马黑黑的几篇关于帖子居中的帖算是了解方法。

您可以找一下他的帖子看看。

也曾年轻 发表于 2026-6-17 08:22

https://www.huachaowang.com/forum.php?mod=viewthread&tid=58395&highlight=%C6%AB%D2%C6

https://www.huachaowang.com/forum.php?mod=viewthread&tid=90852&highlight=%BE%D3%D6%D0

https://www.huachaowang.com/forum.php?mod=viewthread&tid=91152&highlight=%BE%D3%D6%D0

雨季工作室 发表于 2026-6-17 08:48

欣赏枫丹老师佳作！

霜染枫丹 发表于 2026-6-17 09:51

也曾年轻发表于 2026-6-17 08:22
https://www.huachaowang.com/forum.php?mod=viewthread&tid=58395&highlight=%C6%AB%D2%C6

https://www ...

谢谢也曾年轻！我会好好的学习一下，实际上这些东东我刚才看马老师写得很清楚，保姆级教程！从实战中总结出来的，信息量也不大，不存在我理解不了，就是没有好好学习记住。论坛的模板不同，存在一些差异，能够驾驭这些差异才是能力，没有什么那个模板好。我决定从头开始看马老师的这些教程。不能做到的不强做，到了我这个阶段基础上的短板很难做到学会你。这些实战经验我一定好好的理解一下。{:4_204:}{:4_190:}

霜染枫丹 发表于 2026-6-17 09:51

雨季工作室发表于 2026-6-17 08:48
欣赏枫丹老师佳作！

感谢您的赏评，上午好~~{:4_204:}{:4_190:}

也曾年轻 发表于 2026-6-17 10:10

霜染枫丹发表于 2026-6-17 09:51
谢谢也曾年轻！我会好好的学习一下，实际上这些东东我刚才看马老师写得很清楚，保姆级教程！从实战中总结 ...
居中的另一种设置方法，好处是适合各种宽度的帖子(不考虑帖子宽度，不需计算）

margin-left: calc(50% - 81px); transform: translateX(-50%);

梦油发表于 2026-6-17 10:46

霜染枫丹发表于 2026-6-16 21:41
#papa{
margin: 50px auto;
width: 1024px;

幅幅照片、美不胜收，枫丹朋友真是一位难得的才女。

页: [1] 2

花潮论坛's Archiver

原创梅花摄影轮播