每隔几秒更改图像的 src答案

【问题标题】：change src of image every few seconds每隔几秒更改图像的 src
【发布时间】：2020-01-11 05:09:43
【问题描述】：

我正在尝试显示相同的图像，即 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 不播放。我做错了什么？

【问题讨论】：

您确定.gif 的动画效果正确吗？
检查图像路径，或者如果可能，然后给出 src 的完整路径。或者你给 3 秒来改变图像，所以检查你的 gif 不应该延迟 3 秒。
仔细检查图像的路径。试试 '/assets/images/resize.jpg';

标签： javascript html

【解决方案1】：

你需要先设置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】：

从您的代码中，我认为您必须在 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】：

<!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>

【讨论】：