简单的图片轮播改进版
<h2>效果演示（图片来源于网络，不保证长期有效）：</h2><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"><br><button id="btnCtrl" type="button" value="controls">播放图片</button></p>
<script>
var picIdx = 0, pTimer = null, anis = ['in1', 'in2']; //图片索引、计时器标识、动画名称
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) => {
mypic.src = pics;
mypic.style.animation = `${anis} ${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> 本演示CSS动画有三个属性完成：宽、高、旋转。
为了让图片从中间出发，需要图片的父级元素约束图片的布局，即通过 display: grid; place-items: center; 两个配套属性实现。
可以考虑其他的CSS动画形式，一切可以根据需要设计。
不论使用何种属性实现CSS动画，动画的 duration 用时属性应等于或略小于运行 showPic 函数设定的 time 参数所表明的时间。具体代码在第 36 行，${time}ms 就是。 <h2>代码：</h2>
<div id="hEdiv"><pre id="hEpre">
<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;
mypic.style.animation = `${anis} ${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>
</pre></div>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/mod/helight.js';
hlight.hl(hEdiv, hEpre);
</script> 本帖最后由 杨帆 于 2024-12-12 15:58 编辑
感谢马老师推出简单的图片轮播改进版，轮播运行很顺畅{:4_199:}
图片轮播很有趣，但不好控制，须认真学习、体验一下~ 这图片轮播加了旋转和缩放，效果更漂亮了呢{:4_199:} 点击暂停，再开始就换图了，还以为会继续没完成的部分呢{:4_204:} 这个比昨天那个直接轮换更好看{:4_187:} 四个小公举要转晕了。。{:4_173:}
图片裁成椭圆形也好看。图片们轮流出场，旋转方向也不同。。
背景音乐轻柔，若有若无的，好听。 红影 发表于 2024-12-12 16:06
点击暂停，再开始就换图了，还以为会继续没完成的部分呢
这个需要更复杂的算法。这个呢只是简单演示一下，使用定时器 setTimeout 做的，中途控制不了。 花飞飞 发表于 2024-12-12 19:22
四个小公举要转晕了。。
图片裁成椭圆形也好看。图片们轮流出场，旋转方向也不同。。
背景音乐 ...
将来人类都得移民到其他星球，太空旅游要从娃娃抓起 醉美水芙蓉 发表于 2024-12-12 16:55
图图左转转，右转转，很好玩！
跟跳舞似的{:4_170:} 杨帆 发表于 2024-12-12 14:52
感谢马老师推出简单的图片轮播改进版，轮播运行很顺畅
图片轮播很有趣，但不好控制，须认真学 ...
这是很简单的实现机制，整体就是更换图片的src属性值、CSS动画 红影 发表于 2024-12-12 16:10
这个比昨天那个直接轮换更好看
有个动作 马黑黑 发表于 2024-12-12 19:57
将来人类都得移民到其他星球，太空旅游要从娃娃抓起
原来在整南天门计划内训~~{:4_173:} 花飞飞 发表于 2024-12-12 20:37
原来在整南天门计划内训~~
{:4_181:} 马黑黑 发表于 2024-12-12 20:46
{:4_173:}全民太空不是梦 马黑黑 发表于 2024-12-12 19:56
这个需要更复杂的算法。这个呢只是简单演示一下，使用定时器 setTimeout 做的，中途控制不了。
哦，复杂的就算了，看不懂，还是现在的好，代码简洁{:4_187:} 马黑黑 发表于 2024-12-12 19:59
有个动作
是啊，觉得更好看了{:4_187:}