代码
<style>
#tz { --state: running; margin: auto; width: 460px; height: 640px; display: grid; place-items: center; cursor: pointer; }
#mypic { width: 100%; height: 100%; border-radius: 50%; }
@keyframes in1 {
0% { width: 0; height: 0; transform: rotate(0); }
60% { width: 100%; height: 100%; transform: rotate(-720deg) }
90% { width: 100%; height: 100%; transform: rotate(-720deg); }
100% { width: 0; height: 0; transform: rotate(0); }
}
@keyframes in2 {
0% { width: 0; height: 0; transform: rotate(0); }
60% { width: 100%; height: 100%; transform: rotate(720deg) }
90% { width: 100%; height: 100%; transform: rotate(720deg); }
100% { width: 0; height: 0; transform: rotate(0); }
}
</style>
<div id="tz">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1336980656" autoplay loop></audio>
<img id="mypic" src="https://n.sinaimg.cn/sinakd20118/500/w2000h2500/20200618/4de3-ivffpcs2449712.jpg" alt="" />
</div>
<script>
var picIdx = 0, gapTime = 10000, anis = ['in1', 'in2']; //图片索引、轮播间隔时间、动画名称
var picAr = [
'图片1',
'图片2',
'图片3',
'图片4',
];
var showPics = (pics) => {
mypic.src = pics[picIdx];
mypic.style.animation = `${anis[picIdx % 2]} ${gapTime}ms forwards var(--state)`;
picIdx = (picIdx + 1) % pics.length;
};
setInterval( () => {
if(!aud.paused) showPics(picAr);
}, gapTime);
var mState = () => {
if(aud.paused) {
tz.style.setProperty('--state', 'paused');
tz.title = '点击播放';
}else{
tz.style.setProperty('--state', 'running');
tz.title = '点击暂停';
}
};
tz.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.onplaying = aud.onpause = () => mState();
showPics(picAr); //首次运行轮播
</script>
|