简单的图片轮播改进版

马黑黑

效果演示（图片来源于网络，不保证长期有效）：

播放图片

马黑黑

本演示CSS动画有三个属性完成：宽、高、旋转。

为了让图片从中间出发，需要图片的父级元素约束图片的布局，即通过 display: grid; place-items: center; 两个配套属性实现。

可以考虑其他的CSS动画形式，一切可以根据需要设计。

不论使用何种属性实现CSS动画，动画的 duration 用时属性应等于或略小于运行 showPic 函数设定的 time 参数所表明的时间。具体代码在第 36 行，${time}ms 就是。

马黑黑

代码：

<style>
	#tz { --state: running; margin: auto; width: 460px; height: 640px; display: grid; place-items: center; }
	#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=1822435381" autoplay loop></audio>
	<img id="mypic" src="https://n.sinaimg.cn/sinakd20118/500/w2000h2500/20200618/4de3-ivffpcs2449712.jpg" alt="" />
</div>
<p style="text-align: center"><button id="btnCtrl" type="button" value="controls">播放图片</button></p>

<script>
var picIdx = 0, pTimer = null, anis = ['in1', 'in2']; //图片索引、计时器标识、动画名称

var picAr = [
	'图片1',
	'图片2',
	'图片3',
	'图片N',
];

var showPics = (pics, time = 5000) => {
	mypic.src = pics[picIdx];
	mypic.style.animation = `${anis[picIdx % 2]} ${time}ms forwards var(--state)`;
	picIdx = (picIdx + 1) % pics.length;
	pTimer = setTimeout( () => {
		showPics(pics, time);
	}, time);
};

var mState = () => {
	if(aud.paused) {
		tz.style.setProperty('--state', 'paused');
		btnCtrl.textContent = '播放';
		clearTimeout(pTimer);
	}else{
		tz.style.setProperty('--state', 'running');
		showPics(picAr, 10000);
		btnCtrl.textContent = '暂停';
	}
};

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

aud.onplaying = aud.onpause = () => mState();
</script>

杨帆

感谢马老师推出简单的图片轮播改进版，轮播运行很顺畅

图片轮播很有趣，但不好控制，须认真学习、体验一下~

红影

这图片轮播加了旋转和缩放，效果更漂亮了呢

红影

点击暂停，再开始就换图了，还以为会继续没完成的部分呢

红影

这个比昨天那个直接轮换更好看

花飞飞

四个小公举要转晕了。。
图片裁成椭圆形也好看。图片们轮流出场，旋转方向也不同。。
背景音乐轻柔，若有若无的，好听。

马黑黑

红影 发表于 2024-12-12 16:06
点击暂停，再开始就换图了，还以为会继续没完成的部分呢

这个需要更复杂的算法。这个呢只是简单演示一下，使用定时器 setTimeout 做的，中途控制不了。

马黑黑

花飞飞 发表于 2024-12-12 19:22
四个小公举要转晕了。。
图片裁成椭圆形也好看。图片们轮流出场，旋转方向也不同。。
背景音乐 ...

将来人类都得移民到其他星球，太空旅游要从娃娃抓起

马黑黑

醉美水芙蓉 发表于 2024-12-12 16:55
图图左转转，右转转，很好玩！

跟跳舞似的

马黑黑

杨帆 发表于 2024-12-12 14:52
感谢马老师推出简单的图片轮播改进版，轮播运行很顺畅

图片轮播很有趣，但不好控制，须认真学 ...

这是很简单的实现机制，整体就是更换图片的src属性值、CSS动画

马黑黑

红影 发表于 2024-12-12 16:10
这个比昨天那个直接轮换更好看

有个动作

花飞飞

马黑黑 发表于 2024-12-12 19:57
将来人类都得移民到其他星球，太空旅游要从娃娃抓起

原来在整南天门计划内训~~

马黑黑

花飞飞 发表于 2024-12-12 20:37
原来在整南天门计划内训~~

花飞飞

马黑黑 发表于 2024-12-12 20:46

全民太空不是梦

红影

马黑黑 发表于 2024-12-12 19:56
这个需要更复杂的算法。这个呢只是简单演示一下，使用定时器 setTimeout 做的，中途控制不了。

哦，复杂的就算了，看不懂，还是现在的好，代码简洁

红影

马黑黑 发表于 2024-12-12 19:59
有个动作

是啊，觉得更好看了