每隔几秒更改一次图像的 src
[英]change src of image every few seconds
问题描述
我正在尝试显示相同的图像，即 gif（动画）和 jpeg。 我每隔几秒钟就更改src 。
我在开发工具中看到 src 已更改，但 gif 没有动画。
setInterval(function(){
if(c == 1){
imgExt = 'assets/images/resize.gif'
++c;
}
else{
imgExt = 'assets/images/resize.jpg';
--c;
}
// document.querySelector('#floorImgId').src = imgExt;
$('#floorImgId').attr('src', imgExt);
}, 3000)`
当我检查元素时它正在改变，但在页面中，gif 不播放。 我究竟做错了什么？
3 个解决方案
解决方案1
1 2020-01-11 05:28:11
您需要先设置c = 1 ，这样++c才能工作：
（有些程序员喜欢在0和1之间切换，而您的原始代码在1和2之间切换。两者都有效，这取决于您。）
在0和1之间切换：
（我也可能使用prop()而不是attr() ，但要使其接近您的原始版本:)
let c = 0; setInterval(function() { if (c === 0) { imgExt = 'https://i.imgur.com/GCPeHoX.png'; ++c; } else { imgExt = 'https://i.imgur.com/J2wgZZb.png'; --c; } // document.querySelector('#floorImgId').src = imgExt; $('#floorImgId').attr('src', imgExt); }, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img id="floorImgId">
如果只是切换，我倾向于使用：
let toggle = true; setInterval(function() { if (toggle) { imgExt = 'https://i.imgur.com/GCPeHoX.png'; } else { imgExt = 'https://i.imgur.com/J2wgZZb.png'; } toggle = !toggle; // document.querySelector('#floorImgId').src = imgExt; $('#floorImgId').attr('src', imgExt); }, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img id="floorImgId">
要隐藏toggle以使其不会污染外部范围，只需将整个内容包装在 IIFE 中，或者您也可以使用：
setInterval((function() { let toggle = true; return function() { if (toggle) { imgExt = 'https://i.imgur.com/GCPeHoX.png'; } else { imgExt = 'https://i.imgur.com/J2wgZZb.png'; } toggle = !toggle; // document.querySelector('#floorImgId').src = imgExt; $('#floorImgId').attr('src', imgExt); }; }()), 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img id="floorImgId">
解决方案2
0 2020-01-11 05:30:38
从您的代码中，我认为您必须在 else 语句中增加 c 并在 if 语句中减少 c：
c=0;
setInterval(function(){
if(c == 1){
imgExt = 'assets/images/resize.gif'
--c;
}
else{
imgExt = 'assets/images/resize.jpg';
++c;
}
// document.querySelector('#floorImgId').src = imgExt;
$('#floorImgId').attr('src', imgExt);
}, 3000)
解决方案3
0 2020-01-11 05:35:16
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> <img id="floorImgId" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Hamiltonian_path.svg/440px-Hamiltonian_path.svg.png" /> <script> var c = 1,imgExt = ""; setInterval(function(){ if(c == 1){ imgExt = 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Hamiltonian_path.svg/440px-Hamiltonian_path.svg.png' ++c; } else{ imgExt = 'https://buffer.com/library/wp-content/uploads/2016/06/giphy.gif'; --c; } $('#floorImgId').attr('src', imgExt); }, 3000); </script> </body> </html>
每隔几秒就在HTML页面中更改图像
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.