让单次播放的GIF无限循环
<style>#papa { margin: auto; position: relative; width: 98%; }
#papa > p { margin: 6px 0; }
#papa > select { border: 3px solid purple; border-radius: 6px; width: 50px; }
</style>
<p>有一些GIF动图动作仅播放一次，比如下面这一幅：</p>
<img id="gifG" src="https://638183.freep.cn/638183/t22/gif/sss.gif" alt="">
<p>可以给它设定一个时间，让它无限循环播放。请选择：
<select id="gap">
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
<option value="4"> 4 </option>
<option value="5"> 5 </option>
<option value="6"> 6 </option>
</select>
</p>
<p><br></p>
<p>这是怎么做到的？详情请看二楼的解释。</p>
<script>
let time, tId;
gap.onchange = () => {
time = gap.value * 1000;
chgGif();
}
let chgGif = () => {
clearTimeout(tId);
gifG.src = 'https://638183.freep.cn/638183/t22/gif/sss.gif';
tId = setTimeout(chgGif, time);
}
</script> 本帖最后由 马黑黑 于 2022-12-17 09:03 编辑
实现原理：定时给 img “更换” src，src 值和原始值是一样的，所以给更换一词加上了双引号。
实现细节：
为了方便操作，img 标签应有一个 id，这样我们可以直接操作它：
<img id="gifG" src="https://638183.freep.cn/638183/t22/gif/sss.gif" alt="" />下来就是用 JS 定时“更换”图片，“更换”图片的核心代码是：
gifG.src = gifG.src;然后我们制作一个含有定时器的函数，定时“更换”图片。下面是一楼GIF单循环动图变为无限循环效果的完整 JS 部分代码：
<script>
let time, tId;
gap.onchange = () => {
time = gap.value * 1000;
chgGif();
}
let chgGif = () => {
clearTimeout(tId);
gifG.src = gifG.src;
tId = setTimeout(chgGif, time);
}
</script>
setTimeout有些时候也需要清除运行状态，比如本例，在同一个web页里反复更改运行间隔时间，会导致前后运行冲突，所以，chaGif() 函数中，都是先清除 setTimeout 前边的运行：
clearTimeout(tId)；
clearTimeout 需要运行句柄，tId 是事先声明的变量，在函数运行时每一次都会赋值个它：
tId = setTimeout(chgGif, time);
因而清除上一次的运行状态才会有效。
至于 gap.onchange 部分，gap 是一个下拉选择框 select 的 id，onchange 事件指发生改变时。本例通过 select 标签的 onchange 事件接收间隔时间。setTimeout 使用 ms 时间单位，所以 time = gap.value * 1000; ，然后，就是说，获得间隔时间后，运行 chgGif() 函数。 马黑黑 发表于 2022-12-17 08:55
实现原理：定时给 img “更换” src，src 值和原始值是一样的，所以给更换一词加上了双引号。
实现细节：
...
原来是用重新加载原图片，来让图片重复运行的。还能设置间隔时间，又学到新知识了{:4_187:} 马黑黑 发表于 2022-12-17 09:12
setTimeout有些时候也需要清除运行状态，比如本例，在同一个web页里反复更改运行间隔时间，会导致前后运行 ...
那个帖子里的鼠标互动，也是重新加载原图片吧。 很实用的小知识，亮起来，让大家一起来学习{:4_187:} 红影 发表于 2022-12-17 11:29
原来是用重新加载原图片，来让图片重复运行的。还能设置间隔时间，又学到新知识了
小技巧 红影 发表于 2022-12-17 11:34
很实用的小知识，亮起来，让大家一起来学习
谢谢 红影 发表于 2022-12-17 11:31
那个帖子里的鼠标互动，也是重新加载原图片吧。
道理一样的 马黑黑 发表于 2022-12-17 12:22
小技巧
小技巧，大能耐{:4_204:} 马黑黑 发表于 2022-12-17 12:22
谢谢
应该谢谢黑黑才是{:4_187:} 马黑黑 发表于 2022-12-17 12:23
道理一样的
嗯嗯，明白了{:4_187:} 红影 发表于 2022-12-17 16:28
嗯嗯，明白了
这个小小的技巧而已 红影 发表于 2022-12-17 16:28
应该谢谢黑黑才是
{:4_190:} 精彩分享，感谢老师！{:4_176:} 梦缘 发表于 2022-12-17 19:24
精彩分享，感谢老师！
{:4_191:} 马黑黑 发表于 2022-12-17 16:29
这个小小的技巧而已
却是非常实用呢{:4_187:} 马黑黑 发表于 2022-12-17 16:29
再谢{:4_187:} 红影 发表于 2022-12-17 22:22
再谢
花花太多抱不了了 红影 发表于 2022-12-17 22:22
却是非常实用呢
碰上就有用