醉美水芙蓉 发表于 2022-6-19 13:39

学习黑黑老师图片切换《相思难剪》

<style>
.outer { left: -214px; width: 1024px; height: 640px; background: transparent; box-shadow: 0 2px 24px #00AEAE; position: relative; }
.picbox        { position: absolute; width: 1024px; height: 640px; animation: fadeout 2s; }
.mama { left: 20px; bottom: 40px; width: fit-content; height: fit-content; position: absolute; cursor: pointer; border-radius: 0 100%; background: linear-gradient(transparent,green); }
.wrap { width: 90px; height: 60px; box-reflect: below 0 linear-gradient(rgba(0,0,0,.01),#000); -webkit-box-reflect: below 0 linear-gradient(rgba(0,0,0,.01),#000); position: relative; }
.mama meter { width: 90px; position: relative; }
.wrap span { width: 6px; height: 60px; bottom: -8px; display: inline-block; position: absolute; }
.wrap span::before { position: absolute; content: ''; width: inherit; height: 3px; background: #eee; top: -3px; animation: up 1s ease-in infinite; }
.lrcbox { transform: translate(20px, 20px); font: bold 1.2em / 2em sans-serif; color: lightgreen; text-shadow: 1px 1px 1px #000; border-radius: 100% 0; position: absolute; }
@keyframes up { from { top: -6px; } to { top: -16px; } }
@keyframes fadein { from { opacity: .1; } to {opacity: 1; } }
@keyframes fadeout { from { opacity: 1; } to {opacity: .1; } }
</style>
<div class="outer">
        <img class="picbox" src="https://s1.ax1x.com/2022/06/19/XXgAXQ.jpg" alt="" />
        <div class="mama">
                <div class="wrap"></div>
                <meter id="meter" value="0" min="0" max="100" low="33" high="66" optimum="70"></meter>
        </div>
        <div class="lrcbox">Loading ...</div>
</div>
<audio id="aud" src="https://www.qqmc.com/up/kwlink.php?id=96966318&.mp3" autoplay="autoplay" loop="loop"></audio>

<script>

let mama = document.querySelector('.mama'),
        picbox = document.querySelector('.picbox'),
        wrap = document.querySelector('.wrap'),
        lrcbox = document.querySelector('.lrcbox'),
        aud = document.querySelector('#aud'),
        meter = document.querySelector('#meter');
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min,
        prog = (tt, cc) => 100 * cc / tt;
let idx = 0, flag = true, slip= 1;
let picAr = [
        'https://s1.ax1x.com/2022/06/19/XXgl1U.jpg',
        'https://s1.ax1x.com/2022/06/19/XXgF1S.jpg',
        'https://s1.ax1x.com/2022/06/19/XXgKhV.jpg ',
        'https://s1.ax1x.com/2022/06/19/XXgnkq.jpg',
        'https://s1.ax1x.com/2022/06/19/XXge7n.jpg',
        'https://s1.ax1x.com/2022/06/19/XXgZ0s.jpg',
        'https://s1.ax1x.com/2022/06/19/XXgVmj.jpg',
        'https://s1.ax1x.com/2022/06/19/XXgk6g.jpg',
        'https://s1.ax1x.com/2022/06/19/XXgF1S.jpg',
        'https://s1.ax1x.com/2022/06/19/XXgip8.jpg'
];
let lrcAr =[
        ['0.37','陈瑞 - 相思难剪'],
        ['1.08','作词：夏敢若何'],
        ['3.28','作曲：陈伟'],
        ['6.43','编曲：孙培喜'],
        ['8.58','制作人：陈伟'],
        ['10.73','出品人：陈伟'],
        ['15.64','发行：上海昕香音乐工作室'],
        ['20.58','LRC编辑：醉美水芙蓉'],
        ['26.99','从没有过这样的体会'],
        ['33.01','放开了手我如此崩溃'],
        ['39.84','抱紧寂寞把自己安慰'],
        ['46.42','我在回忆里百转千回'],
        ['52.89','从没有过这样的狼狈'],
        ['58.94','弄丢了你我如此疚愧'],
        ['65.81','细数流年叹物是人非'],
        ['72.14','我才知道你最珍贵'],
        ['78.85','相思难剪情路难退'],
        ['85.18','守着往事一个人心碎'],
        ['91.77','春花落尽又是一个秋'],
        ['98.21','除了眼泪还是眼泪'],
        ['104.62','相思难剪苦酒一杯'],
        ['111.17','恨海情天一个人面对'],
        ['117.69','誓言飘散旧梦还残留'],
        ['123.86','爱到最后一场宿醉'],
        ['153.29','从没有过这样的狼狈'],
        ['159.36','弄丢了你我如此疚愧'],
        ['166.28','细数流年叹物是人非'],
        ['172.76','我才知道你最珍贵'],
        ['179.02','相思难剪情路难退'],
        ['185.72','守着往事一个人心碎'],
        ['192.32','春花落尽又是一个秋'],
        ['198.62','除了眼泪还是眼泪'],
        ['205.15','相思难剪苦酒一杯'],
        ['211.68','恨海情天一个人面对'],
        ['218.17','誓言飘散旧梦还残留'],
        ['224.73','爱到最后一场宿醉'],
        ['230.99','誓言飘散旧梦还残留'],
        ['237.52','爱到最后一场宿醉'],
        ['245.28','谢谢欣赏！']
];
       
Array.from({length: 10}).forEach((ele,key) => {
        ele = document.createElement('span');
        ele.className = 'sskey';
        ele.style.left = key * 6 + key * 3 + 'px';
        ele.style.height = num(10,60) + 'px';
        ele.style.backgroundColor = `rgba(${num(0,255)},${num(0,255)},${num(0,255)},.95)`;
        wrap.appendChild(ele);
})

let sskey = document.querySelectorAll('.sskey');

mama.onclick = () => aud.paused ? aud.play() : aud.pause();

aud.addEventListener('timeupdate', () => {
        Array.from(sskey).forEach((ele) => {
                ele.style.height = num(10, 60) + 'px';
        })
        meter.value = prog(aud.duration, aud.currentTime);
                let tt = aud.currentTime;
        for(j=0; j<lrcAr.length; j++){
                if(tt >= lrcAr - slip){
                        lrcbox.innerHTML = lrcAr;
                }
        }
});

let timer = setInterval(() => {
        idx ++;
        if(idx >= picAr.length) idx = 0;
        picbox.src = picAr;
        flag ? (picbox.style.animation = 'fadein .8s', flag = false) : (picbox.style.animation = 'fadeout .8s', flag = true);
}, 10000);

</script>


红影 发表于 2022-6-19 17:46

代码的最后貌似多了</td></tr></table>，让论坛界面有点变形了呢。

红影 发表于 2022-6-19 17:45

水芙蓉学得真快，这个制作真美{:4_187:}

醉美水芙蓉 发表于 2022-6-19 18:05

红影 发表于 2022-6-19 17:46
代码的最后貌似多了，让论坛界面有点变形了呢。

谢谢红影美女支持！

翁奕童苑 发表于 2022-6-19 18:10

欣赏佳作，点赞！

醉美水芙蓉 发表于 2022-6-19 18:19

翁奕童苑 发表于 2022-6-19 18:10
欣赏佳作，点赞！

老师晚上好！

马黑黑 发表于 2022-6-19 19:15

漂酿

小辣椒 发表于 2022-6-19 20:43

这个制作漂亮，水芙蓉现在进去复制一下发帖代码，以后就不会错了

醉美水芙蓉 发表于 2022-6-19 20:58

红影 发表于 2022-6-19 17:46
代码的最后貌似多了，让论坛界面有点变形了呢。

谢谢红影美女告知！

醉美水芙蓉 发表于 2022-6-19 20:58

马黑黑 发表于 2022-6-19 19:15
漂酿

谢谢黑黑老师指导！

醉美水芙蓉 发表于 2022-6-19 20:58

小辣椒 发表于 2022-6-19 20:43
这个制作漂亮，水芙蓉现在进去复制一下发帖代码，以后就不会错了

感谢小辣椒美女纠正错误！

马黑黑 发表于 2022-6-19 21:08

醉美水芙蓉 发表于 2022-6-19 20:58
谢谢黑黑老师指导！

{:4_190:}

樵歌 发表于 2022-6-19 21:38

马术运用娴熟，制作漂亮。

岩新新 发表于 2022-6-19 21:50

欣赏精彩制作！

醉美水芙蓉 发表于 2022-6-19 21:54

岩新新 发表于 2022-6-19 21:50
欣赏精彩制作！

问候岩新老师晚上好！

红影 发表于 2022-6-20 10:16

醉美水芙蓉 发表于 2022-6-19 18:05
谢谢红影美女支持！

水芙蓉学的真快，这个制作很漂亮{:4_187:}
页: [1]
查看完整版本: 学习黑黑老师图片切换《相思难剪》