阴阳猫（东篱可以开发一下这个模板）

马黑黑 · 发表于 2022-7-15 21:27

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2022-7-15 21:27

代码：

<style>
#papa { left: -214px; width: 1024px; height: 640px; box-shadow: 3px 3px 24px #000; background: #111 linear-gradient(snow, teal); position: relative; }
#drawer { position: absolute; width: 500px;; height: 450px; left: calc(50% - 250px); top: calc(50% - 225px); box-shadow: inherit; overflow: hidden; }
.mypic { position: absolute; top: -100%; width: 100%; height: 100%; transition: top 1.5s;}
</style>
<div id="papa">
<div id="drawer"></div>
</div>
<script>
let step = 1, start = 0, ani = 100, last;
let pics = [
'https://638183.freep.cn/638183/Pic/38/1.jpg',
'https://638183.freep.cn/638183/Pic/38/2.jpg',
'https://638183.freep.cn/638183/Pic/38/3.jpg',
'https://638183.freep.cn/638183/Pic/38/4.jpg',
'https://638183.freep.cn/638183/Pic/38/5.jpg'
];
for(pic of pics) {
let ele = document.createElement('img');
ele.src = pic;
ele.alt = '';
ele.title = pic;
ele.className = 'mypic';
drawer.appendChild(ele);
}
let picAr = document.querySelectorAll('.mypic');
picAni(0, picAr.length - 1);
let timer = setInterval(() => { picAni(0, picAr.length - 1); },3000);
function picAni(n1, n2) {
if(last != undefined) picAr[last].style.top= ani + '%';
let temp = start;
last = temp;
ani = step < 0 ? -100 : 100;
picAr[temp].style.top = '0%';
start += step;
if(start == n1 || start == n2) step = -step;
}
</script>