一个简单的图片轮播
<h2>代码：</h2><div id="hEdiv"><pre id="hEpre">
<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;
pTimer = setTimeout( () => {
showPics(pics, time);
}, time);
};
//按钮控制图片只是为了演示，实际使用时可以考虑与其他布尔变量联动
btnCtrl.onclick = () => {
if(picPlay) {
showPics(picAr, 3000);
btnCtrl.textContent = '暂停播放';
}else{
clearTimeout(pTimer);
btnCtrl.textContent = '播放图片';
}
picPlay = !picPlay;
};
</script>
</pre></div>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/mod/helight.js';
hlight.hl(hEdiv, hEpre);
</script>
<h2>演示（图片来源于网络，不保证长期有效性）：</h2>
<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 style="text-align: center"><br><button id="btnCtrl" type="button" value="controls">播放图片</button></p>
<script>
var picIdx = 0, picPlay = true,pTimer = null; //图片索引、是否播放、计时器标识
var picAr = [
'https://n.sinaimg.cn/sinakd20118/500/w2000h2500/20200618/4de3-ivffpcs2449712.jpg',
'https://ts1.cn.mm.bing.net/th/id/R-C.1d9d38209568a97cd268807b5df4c9f0?rik=ZpqTGRiguiJhqA&riu=http%3a%2f%2f1844.img.pp.sohu.com.cn%2fimages%2fblog%2f2009%2f6%2f29%2f10%2f3%2f122d6678015g213.jpg&ehk=m4%2fqvE9%2fBDfCoXDTLbon2odGup7uvoTQymrZX%2bx0IhU%3d&risl=&pid=ImgRaw&r=0',
'https://img.pconline.com.cn/images/upload/upc/tx/photoblog/1202/10/c3/10384945_10384945_1328860163765_mthumb.jpg',
'https://ts1.cn.mm.bing.net/th/id/R-C.bb7f8583f25ac280f2f61de21dc81fc4?rik=mWDFDFwMhSGJ2A&riu=http%3a%2f%2fn.sinaimg.cn%2fsinacn10116%2f104%2fw1024h1480%2f20190813%2fe552-icapxpi0739776.jpg&ehk=6q1AEGfdaKhr8OJ19GDjtqU3%2bn6AxRjyvp7mCnaggrc%3d&risl=&pid=ImgRaw&r=0'
];
var showPics = (pics, time = 5000) => {
picIdx = (picIdx + 1) % pics.length;
mypic.src = pics;
pTimer = setTimeout( () => {
showPics(pics, time);
}, time);
};
btnCtrl.onclick = () => {
if(picPlay) {
showPics(picAr, 3000);
btnCtrl.textContent = '暂停播放';
}else{
clearTimeout(pTimer);
btnCtrl.textContent = '播放图片';
}
picPlay = !picPlay;
};
</script> 图片养眼~~四位小仙女~~可爱小公举~~赏心悦目。。{:4_173:}
这个轮流播放效果，还真是简单又好用。
有按纽控制挺好，随时可停，还可以改变播放时每张显示的时间。。
看了下图片代码，第7行的那张地址最后居然有 个;r=0，震惊了，这个图片地址还真是无所不容。。。{:4_173:} 花飞飞 发表于 2024-12-11 19:22
图片养眼~~四位小仙女~~可爱小公举~~赏心悦目。。
这个轮流播放效果，还真是简单又好用。
时间由自己在调用 showPics 函数的时候制定 马黑黑 发表于 2024-12-11 19:39
时间由自己在调用 showPics 函数的时候制定
嗯哪，调整33行，快慢就可以控制了。
我在想它怎么整到贴子里。
昨天看到一个作品，两张轮播，切得有点慢。。等很久才看到另一张。。{:4_170:} 花飞飞 发表于 2024-12-11 19:43
嗯哪，调整33行，快慢就可以控制了。
我在想它怎么整到贴子里。
昨天看到一个作品，两张轮播，切得有点 ...
时间是可以定制的 马黑黑 发表于 2024-12-11 19:44
时间是可以定制的
回头我瞅瞅那个代码
说到做贴，这两三个月算是瞎了。。事儿太多。。{:4_173:} “按钮控制图片只是为了演示，实际使用时可以考虑与其他布尔变量联动”
也就是可以用小播来代替这个按钮呗{:4_204:} 很漂亮的图片轮播代码{:4_187:} 图片转换效果很漂亮{:4_199:} 红影 发表于 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
事儿多做帖的事情可以搁一下
还有就是无意间看到另一个大咖的作品，惊为天人。。
开了一张对比着自己做的，感觉自己差太多。
也花了一些时间，但出不了图。。
都整半拉搁置着。。{:4_173:} 花飞飞 发表于 2024-12-11 21:30
还有就是无意间看到另一个大咖的作品，惊为天人。。
开了一张对比着自己做的，感觉自己差太多。
也花了 ...
基本功齐全上去了，然后才能实现创意 马黑黑 发表于 2024-12-11 21:07
完全可以
嗯嗯，知道了{:4_187:} 漂亮的图片轮换，老师辛苦了！
页:
[1]
2