一个简单的图片轮播

马黑黑

代码：

<style>
	/* 应根据需要设置好图片的父容器尺寸，所准备的图片宽高比例应大致一致 */
	#tz { margin: auto; width: 460px; height: 640px; }
	#mypic { width: 100%; height: 100%; }
</style>

<div id="tz">
	<img id="mypic" src="https://n.sinaimg.cn/sinakd20118/500/w2000h2500/20200618/4de3-ivffpcs2449712.jpg" />
</div>
<p><button id="btnCtrl" type="button" value="controls">播放图片</button></p>

<script>
var picIdx = 0, picPlay = true,  pTimer = null; //图片索引、是否播放、计时器标识

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

var showPics = (pics, time = 5000) => {
	picIdx = (picIdx + 1) % pics.length;
	mypic.src = pics[picIdx];
	pTimer = setTimeout( () => {
		showPics(pics, time);
	}, time);
};

//按钮控制图片只是为了演示，实际使用时可以考虑与其他布尔变量联动
btnCtrl.onclick = () => {
	if(picPlay) {
		showPics(picAr, 3000);
		btnCtrl.textContent = '暂停播放';
	}else{
		clearTimeout(pTimer);
		btnCtrl.textContent = '播放图片';
	}
	picPlay = !picPlay;
};
</script>

马黑黑

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

播放图片

花飞飞

图片养眼~~四位小仙女~~可爱小公举~~赏心悦目。。

这个轮流播放效果，还真是简单又好用。
有按纽控制挺好，随时可停，还可以改变播放时每张显示的时间。。

花飞飞

看了下图片代码，第7行的那张地址最后居然有 个;r=0，震惊了，这个图片地址还真是无所不容。。。

马黑黑

花飞飞 发表于 2024-12-11 19:22
图片养眼~~四位小仙女~~可爱小公举~~赏心悦目。。

这个轮流播放效果，还真是简单又好用。

时间由自己在调用 showPics 函数的时候制定

花飞飞

马黑黑 发表于 2024-12-11 19:39
时间由自己在调用 showPics 函数的时候制定

嗯哪，调整33行，快慢就可以控制了。
我在想它怎么整到贴子里。
昨天看到一个作品，两张轮播，切得有点慢。。等很久才看到另一张。。

马黑黑

花飞飞 发表于 2024-12-11 19:43
嗯哪，调整33行，快慢就可以控制了。
我在想它怎么整到贴子里。
昨天看到一个作品，两张轮播，切得有点 ...

时间是可以定制的

花飞飞

马黑黑 发表于 2024-12-11 19:44
时间是可以定制的

回头我瞅瞅那个代码
说到做贴，这两三个月算是瞎了。。事儿太多。。

红影

“按钮控制图片只是为了演示，实际使用时可以考虑与其他布尔变量联动”
也就是可以用小播来代替这个按钮呗

红影

很漂亮的图片轮播代码

小辣椒

图片转换效果很漂亮

马黑黑

红影 发表于 2024-12-11 20:11
“按钮控制图片只是为了演示，实际使用时可以考虑与其他布尔变量联动”
也就是可以用小播来代替这个按钮呗 ...

完全可以

马黑黑

小辣椒 发表于 2024-12-11 20:46
图片转换效果很漂亮

晚上嚎

小辣椒

马黑黑 发表于 2024-12-11 21:07
晚上嚎

黑黑这个图片转换可以加一点淡进淡出的效果吗?

马黑黑

小辣椒 发表于 2024-12-11 21:08
黑黑这个图片转换可以加一点淡进淡出的效果吗?

相加自己加就是了

马黑黑

花飞飞 发表于 2024-12-11 19:53
回头我瞅瞅那个代码
说到做贴，这两三个月算是瞎了。。事儿太多。。

事儿多做帖的事情可以搁一下

花飞飞

马黑黑 发表于 2024-12-11 21:10
事儿多做帖的事情可以搁一下

还有就是无意间看到另一个大咖的作品，惊为天人。。
开了一张对比着自己做的，感觉自己差太多。
也花了一些时间，但出不了图。。
都整半拉搁置着。。

马黑黑

花飞飞 发表于 2024-12-11 21:30
还有就是无意间看到另一个大咖的作品，惊为天人。。
开了一张对比着自己做的，感觉自己差太多。
也花了 ...

基本功齐全上去了，然后才能实现创意

红影

马黑黑 发表于 2024-12-11 21:07
完全可以

嗯嗯，知道了

梦江南

漂亮的图片轮换，老师辛苦了！