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

简单图片轮播再改进

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

<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 = [
        '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) => {
        mypic.src = pics;
        mypic.style.animation = `${anis} ${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:13

<h2>代码</h2>
<div id="hEdiv"><pre id="hEpre">
&lt;style&gt;
        #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); }
        }
&lt;/style&gt;

&lt;div id="tz"&gt;
        &lt;audio id="aud" src="https://music.163.com/song/media/outer/url?id=1336980656" autoplay loop&gt;&lt;/audio&gt;
        &lt;img id="mypic" src="https://n.sinaimg.cn/sinakd20118/500/w2000h2500/20200618/4de3-ivffpcs2449712.jpg" alt="" /&gt;
&lt;/div&gt;

&lt;script&gt;
var picIdx = 0, gapTime = 10000, anis = ['in1', 'in2']; //图片索引、轮播间隔时间、动画名称

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

var showPics = (pics) =&gt; {
        mypic.src = pics;
        mypic.style.animation = `${anis} ${gapTime}ms forwards var(--state)`;
        picIdx = (picIdx + 1) % pics.length;
};

setInterval( () =&gt; {
        if(!aud.paused) showPics(picAr);
}, gapTime);

var mState = () =&gt; {
        if(aud.paused) {
                tz.style.setProperty('--state', 'paused');
                tz.title = '点击播放';
        }else{
                tz.style.setProperty('--state', 'running');
                tz.title = '点击暂停';
        }
};

tz.onclick = () =&gt; aud.paused ? aud.play() : aud.pause();

aud.onplaying = aud.onpause = () =&gt; mState();

showPics(picAr); //首次运行轮播

&lt;/script&gt;
</pre></div>

<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/mod/helight.js';
hlight.hl(hEdiv, hEpre);
</script>

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

这个更先进。。
不用按纽。。暂停后可以接着播放。。{:4_199:}
你怎么就随便改改就感觉更顺手了。。

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

每天一个新版本~~零碎时{:4_173:}间用得好。。

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

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

本次改进：

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

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

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

花飞飞 发表于 2024-12-13 22:24

马黑黑 发表于 2024-12-13 22:19
本次改进：

（一）使用 setInterval 定时器运行轮播函数 showPics(pics)，函数也改为但参数，定时器间隔 ...

阅{:4_170:}

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

花飞飞 发表于 2024-12-13 22:24
阅

已读已回

花飞飞 发表于 2024-12-13 23:00

马黑黑 发表于 2024-12-13 22:25
已读已回

已读不回和已读乱回有时候也得用用{:4_173:}

杨帆 发表于 2024-12-14 00:12

本帖最后由 杨帆 于 2024-12-14 03:27 编辑

老师，您辛苦了！效果演示棒棒哒{:5_116:}{:5_116:}{:5_116:}

梦江南 发表于 2024-12-14 17:13

老师辛苦了！赞！{:4_199:}

冬天的雨 发表于 2024-12-14 17:52

这个是马老师的原版了，冬雨都不清楚和改进版的区别在哪里/::L

马黑黑 发表于 2024-12-14 19:06

冬天的雨 发表于 2024-12-14 17:52
这个是马老师的原版了，冬雨都不清楚和改进版的区别在哪里/::L

区别很大

红影 发表于 2024-12-14 20:08

这个好，暂停后可以继续完成剩下的内容了。
黑黑的改进这么快就完成了，厉害{:4_199:}

红影 发表于 2024-12-14 20:10

马黑黑 发表于 2024-12-13 22:19
本次改进：

（一）使用 setInterval 定时器运行轮播函数 showPics(pics)，函数也改为但参数，定时器间隔 ...

感觉持续行进很顺滑呢，没感觉到什么打折扣的地方。黑黑厉害{:4_199:}

马黑黑 发表于 2024-12-14 21:29

红影 发表于 2024-12-14 20:10
感觉持续行进很顺滑呢，没感觉到什么打折扣的地方。黑黑厉害

折扣打了，你没留意到而已{:4_170:}

马黑黑 发表于 2024-12-14 21:30

红影 发表于 2024-12-14 20:08
这个好，暂停后可以继续完成剩下的内容了。
黑黑的改进这么快就完成了，厉害

最近比较忙，没多少时间弄这些

红影 发表于 2024-12-14 22:55

马黑黑 发表于 2024-12-14 21:29
折扣打了，你没留意到而已

这个还是挺简洁的，很不错啊，既然没留意到，说明影响不大，没问题的{:4_187:}

红影 发表于 2024-12-14 22:56

马黑黑 发表于 2024-12-14 21:30
最近比较忙，没多少时间弄这些

忙着还弄成了，给黑黑点赞{:4_199:}

马黑黑 发表于 2024-12-14 23:51

红影 发表于 2024-12-14 22:56
忙着还弄成了，给黑黑点赞

年底了都会忙点

马黑黑 发表于 2024-12-14 23:52

红影 发表于 2024-12-14 22:55
这个还是挺简洁的，很不错啊，既然没留意到，说明影响不大，没问题的

将就用吧
页: [1] 2 3 4
查看完整版本: 简单图片轮播再改进