简单图片轮播再改进

马黑黑 · 发表于 2024-12-13 22:11

请马上登录，朋友们都在花潮里等着你哦：）

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

x

效果演示：点击图片区域切换暂停、播放

马黑黑 · 发表于 2024-12-13 22:13

代码

<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>

花飞飞 · 发表于 2024-12-13 22:16

这个更先进。。
不用按纽。。暂停后可以接着播放。。

你怎么就随便改改就感觉更顺手了。。

花飞飞 · 发表于 2024-12-13 22:18

每天一个新版本~~零碎时

间用得好。。

马黑黑 · 发表于 2024-12-13 22:19

本帖最后由马黑黑于 2024-12-13 22:21 编辑

本次改进：

（一）使用 setInterval 定时器运行轮播函数 showPics(pics)，函数也改为但参数，定时器间隔时间用一个全局变量 gapTime 表示；

（二）整体效果设计是酱紫：播放、暂停间的状态切换是衔接的。

可能存在的问题：① JS的定时器都不太牢靠，轮播的健壮性不知是否可以持续；②暂停时未加入CSS动画的时间扣除，因此设计初衷会打点折扣。