论坛 › 欢乐水吧 › 我也做个图片轮播代码

亚伦影音工作室 发表于 2024-12-14 14:46

我也做个图片轮播代码

本帖最后由 亚伦影音工作室 于 2024-12-15 10:50 编辑 <br /><br /><style type="text/css">
#papa { margin: 20px 20px ; width: 550px; height: 720px; background: linear-gradient(80deg, #000080, #000090, #000, #800); box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 10px #880000; position: relative; display: grid; place-items: center; z-index: 10000; overflow:hidden;--state: running;}
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:4%; left:65%;color:#FFf;font: normal 2em楷体; opacity: 1; cursor: pointer; z-index: 10}
#mdiv {top:12%; left:75%;cursor: pointer;width:120px;height: 120px;animation:rot 10s linear infinite var(--state);position: absolute;filter:drop-shadow(#fff 1px 0px 1px );z-index: 40;}
@keyframes rot { to { transform: rotate(2turn);} }
.photo {width: 450px;
height: 700px;
position: absolute;z-index: -2;
top:2%; left:12%;
opacity: 0;clip-path: ellipse(50% 50% at 50% 50%);
animation: round 48s linear infinite var(--state);
}

@keyframes round {0% {opacity: 0; transform:translate(0%,0%)scale(0)rotate(1080deg);}
6% {opacity: 1;transform:translate(0%,0%)scale(1);}
10% {opacity: 1; transform:translate(0%,0%)scale(1);}
11% {opacity: 1; transform:translate(0%,0%)scale(.8);}
12% {opacity: 1; transform:translate(0%,0%)scale(1);}
13% {opacity: 1;transform:translate(0%,0%)scale(1)rotateY(180deg);}
14% {opacity: 1; transform:translate(0%,0%)scale(1)rotateY(0deg);}
16% {opacity: 1; transform:translate(0%,0%)scale(0)rotate(-360deg);}
18% {opacity: 0; transform:translate(0%,0%)scale(0)rotate(-360deg);}
}
.photo:nth-child(1) {background:#000 url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/1636bc0d156def96d36aa161a8a722db.jpg)no-repeat center/cover;
animation-delay: 42s;
}
.photo:nth-child(2) {background:#000 url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/787efb70c82cf4a89a89ff8e65d7aa12.jpg)no-repeat center/cover;
animation-delay: 36s;
}
.photo:nth-child(3) {background:#000 url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/dab44b34758f69cd90a964a1d44969af.png)no-repeat center/cover;
animation-delay: 30s;
}
.photo:nth-child(4) {background:#000 url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/cc19c047f98660b8425d2de3bdfd7b3c.jpg)no-repeat center/cover;
animation-delay: 24s;
}
.photo:nth-child(5) {background:#000 url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/b13bc54ca1e900b0f4ecc9c090358e89.jpg)no-repeat center/cover;
animation-delay: 18s;
}
.photo:nth-child(6) { background:#000 url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/a4a7195b6b8c0ae13efda5e7bee387ad.jpg)no-repeat center/cover;
animation-delay: 12s;
}
.photo:nth-child(7) { background:#000 url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/421e214859cbe2253593d7e38dbd1a6c.jpeg)no-repeat center/cover;
animation-delay: 6s;
}
.photo:nth-child(8) { background:#000 url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/59fe12000912119c3ab62e065b7d99e4.jpg)no-repeat center/cover;
animation-delay: 0s;
}
</style>
<style type="text/css">.set {
position: absolute;z-index: 1;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.set div {
position: absolute;
display: block;
user-select: none;
}
.set div img {pointer-events: none;
max-width: 90px;
max-height: 120px;
}
.set div:nth-child(1) {
left: 20%;
animation: animate 15s linear infinite var(--state);
animation-delay: -7s;
}
.set div:nth-child(2) {
left: 50%;
animation: animate 20s linear infinite var(--state);
animation-delay: -5s;
}
.set div:nth-child(2) {
left: 50%;
animation: animate 20s linear infinite var(--state);
animation-delay: -5s;
}
.set div:nth-child(3) {
left: 70%;
animation: animate 25s linear infinite var(--state);
}
.set div:nth-child(4) {
left: 0%;
animation: animate 15s linear infinite var(--state);
animation-delay: -5s;
}
.set div:nth-child(5) {
left: 85%;
animation: animate 18s linear infinite var(--state);
animation-delay: -10s;
}
.set div:nth-child(6) {
left: 15%;
animation: animate 12s linear infinite var(--state);
animation-delay: -7s;
}
.set div:nth-child(7) {
left: 60%;
animation: animate 14s linear infinite var(--state);
animation-delay: -7s;
}

@keyframes animate {
0% {
    opacity: 0;
    top: -10%;
    transform: translateX(20px) rotate(0deg);
}
10% {
    opacity: 1;
}
20% {
    transform: translateX(-20px) rotate(45deg);
}
40% {
    transform: translateX(-20px) rotate(90deg);
}
60% {
    transform: translateX(-20px) rotate(135deg);
}
80% {
    transform: translateX(-20px) rotate(180deg);
}
100% {
    top: 110%;
    transform: translateX(-20px) rotate(225deg);
}
}
.set2 {
transform: scale(2) rotateY(180deg);
filter: blur(2px);
}

.set3 {
transform: scale(0.8) rotateY(30deg);
filter: blur(4px);
}
.lrc{z-index: 10;
    width: 90%;
    height: 180px;
    overflow: hidden;filter:drop-shadow(#ccc 1px 0 0)drop-shadow(#ccc 0 1px 0)drop-shadow(#ccc -1px 0 0) drop-shadow(#ccc 0 -1px0);
    display: block;position: absolute;top:90%; left:5%;
    margin: 0 auto;}
.lrc #ullrc{
width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
    margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 70px;
    line-height: 60px;
font-family:华文隶书;
    font-size: 0px;
    color: #000078;
    font-weight: normal;
    transition: .3s all ease;
    list-style-type: none;
    text-align: center;display: block;
    width: 100%;
    margin: 0 auto;}
/*动态歌词样式*/
.lrc #ullrc li.active{
    font-size: 40px;
    color: #800080;
text-align: center;
}
#wzsd1 { animation: wzsd 0.56s linear infinite var(--state);}
@keyframes wzsd {
from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {opacity: 1;}
to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
</style>
<div id="papa">
<audio autoplay="" id="aud" loop="" src="https://s2.ananas.chaoxing.com/sv-w7/audio/31/5c/8e/c94454681bc93212751bc46d6cd20d50/audio.mp3">&nbsp;</audio>
<span id="fullscreen">全屏观赏</span>
<img id="mdiv"src="https://pic.imgdb.cn/item/67525c0bd0e0a243d4de6c56.png">
<div><div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
</div>
<div class="set">
<div><img alt="" src="https://pic.imgdb.cn/item/65b8fb93871b83018a66120a.png" /></div>
<div><img alt="" src="https://pic.imgdb.cn/item/6752dfd4d0e0a243d4def478.png" /></div>
<div><img alt="" src="https://pic.imgdb.cn/item/6752df24d0e0a243d4def449.png" /></div>
<div><img alt="" src="https://pic.imgdb.cn/item/6752dfd4d0e0a243d4def478.png" /></div>
<div><img alt="" src="https://pic.imgdb.cn/item/6752e474d0e0a243d4def617.png" /></div>
<div><img alt="" src="https://pic.imgdb.cn/item/6752dfd4d0e0a243d4def478.png" /></div>
<div><img alt="" src="https://pic.imgdb.cn/item/6752e474d0e0a243d4def617.png" /></div>
</div>

<div class="set set2">
<div><img alt="" src="https://pic.imgdb.cn/item/65b8fb93871b83018a66120a.png" /></div>
<div><img alt="" src="https://pic.imgdb.cn/item/6752dfd4d0e0a243d4def478.png" /></div>
<div><img alt="" src="https://pic.imgdb.cn/item/6752df24d0e0a243d4def449.png" /></div>
<div><img alt="" src="https://pic.imgdb.cn/item/6752dfd4d0e0a243d4def478.png" /></div>
<div><img alt="" src="https://pic.imgdb.cn/item/6752e474d0e0a243d4def617.png" /></div>
<div><img alt="" src="https://pic.imgdb.cn/item/6752dfd4d0e0a243d4def478.png" /></div>
<div><img alt="" src="https://pic.imgdb.cn/item/6752e474d0e0a243d4def617.png" /></div>
</div>
<div class="set set3">
<div><img alt="" src="https://pic.imgdb.cn/item/65b8fb93871b83018a66120a.png" /></div>
<div><img alt="" src="https://pic.imgdb.cn/item/6752dfd4d0e0a243d4def478.png" /></div>
<div><img alt="" src="https://pic.imgdb.cn/item/6752df24d0e0a243d4def449.png" /></div>
<div><img alt="" src="https://pic.imgdb.cn/item/6752dfd4d0e0a243d4def478.png" /></div>
<div><img alt="" src="https://pic.imgdb.cn/item/6752e474d0e0a243d4def617.png" /></div>
<div><img alt="" src="https://pic.imgdb.cn/item/6752dfd4d0e0a243d4def478.png" /></div>
<div><img alt="" src="https://pic.imgdb.cn/item/6752e474d0e0a243d4def617.png" /></div>
</div>

<divclass="lrc" >
      <div   id="wzsd1"><ul id="ullrc">
       </ul>
      </div>      
</div>
</div>
<script>
mdiv.onclick = () => aud.paused ?(aud.play()):(aud.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mState = () => {papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');};
aud.onplaying = aud.onpause = () => mState();

let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
                fs = !fs;
      };
</script>

<script >
var lrc = `最后的枫叶(DJ何鹏版) - 陈瑞
作词：绿柳
作曲：陈伟
编曲：牛侠
监制：萧跃
制作人：陈伟
出品人：陈伟
发行：四川讯飞超脑信息科技有限公司
最后的那一片枫叶
了断了尘缘空阙
坠落在缠绵的深渊
憔悴在风花雪月
最后的那一片枫叶
作别了西窗楼雪
消失在茫茫的荒野
沉睡在冰冷世界
多少次我踏遍寒山
寻觅你的多情笑靥
多少次我凝望远方
幻想你的独影摇曳
你飘逸的身影
宛若是一只香殒的蝴蝶
你赤红的凋落埋葬了
一季相思的誓约
最后的那一片枫叶
了断了尘缘空阙
坠落在缠绵的深渊
憔悴在风花雪月
最后的那一片枫叶
作别了西窗楼雪
消失在茫茫的荒野
沉睡在冰冷世界
多少次我踏遍寒山
寻觅你的多情笑靥
多少次我凝望远方
幻想你的独影摇曳
你飘逸的身影
宛若是一只香殒的蝴蝶
你赤红的凋落埋葬了
一季相思的誓约
多少次我踏遍寒山
寻觅你的多情笑靥
多少次我凝望远方
幻想你的独影摇曳
你飘逸的身影
宛若是一只香殒的蝴蝶
你赤红的凋落埋葬了
一季相思的誓约
`;
function $(id) {return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
    var parts = lrc.split("\n");
    for (let index = 0; index < parts.length; index++) {
      parts = getLrcObj(parts);
    }
    return parts;

    function getLrcObj(content) {
var twoParts = content.split("]");
var time = twoParts.substr(1);
var timeParts = time.split(":");
var seconds = +timeParts;
      var min = +timeParts;
      seconds = min * 60 + seconds;
      var words = twoParts;
      return{
            seconds: seconds,
            words: words,
      };
    }
}
var lrcArray = getLrcArray();
function inputLrc() {
    for (let index = 0; index < lrcArray.length; index++) {
      var li = document.createElement("li");
      li.innerText = lrcArray.words;
      $("ullrc").appendChild(li);
    }
}
inputLrc();
function setPosition() {
    var index = getLrcIndex();
    if (index == -1) {
      return;
    }
    var lrc_li_height = 70, lrc_ul_height = 60;
    var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {top = 0;}$("ullrc").style.marginTop = -top + "px";
    var activeLi = $("ullrc").querySelector(".active");
    if(activeLi){
      activeLi.classList.remove("active");}
$("ullrc").children.classList.add("active");
}
var turn = 0;
function getLrcIndex(){
var time = $("aud").currentTime + turn;for (var index = 0; index < lrcArray.length; index++) {
      if (lrcArray.seconds > time) {
            return index - 1;
      }
    }
}
$("aud").ontimeupdate = setPosition;
</script>

老谟深虑 发表于 2024-12-14 18:51

         好新颖，好制作。点赞！

世外桃源 发表于 2024-12-14 20:00

欣赏欣赏

世外桃源 发表于 2024-12-14 20:00

感谢分享

小辣椒 发表于 2024-12-14 21:15

亚伦今天这个特效也是用了上次的三组png

图片转换效果漂亮的{:4_199:}

小辣椒 发表于 2024-12-14 21:18

雪花效果和背景穿单衣的图片就不适合了{:4_170:}

小辣椒 发表于 2024-12-14 21:18

欣赏亚伦的精彩制作

红影 发表于 2024-12-14 21:23

漂亮的图片轮播，加了很多效果。欣赏亚伦老师好帖{:4_199:}

杨帆 发表于 2024-12-15 00:46

动感十足，轮播顺畅，切换自然，多重效果，谢谢亚伦老师精彩分享{:4_191:}

查看完整版本: 我也做个图片轮播代码