Question

我将使用其他方式为每个图像创建一个具有一定间隔的动画，但是它不起作用，这让我感到困惑，请任何人告诉我我的代码有什么问题。这是我的代码：

var j = setInterval(james, 5);

function james() {
  var pos = 1;
  if (pos >= 6) {
    clearInterval(j);
    document.getElementsByTagName('img')[0].setAttribute('src', 'https://www.ptcrush.com/' + pos + '.gif');
  } else {
    var pos += 1;
    document.getElementsByTagName('img')[0].setAttribute('src', 'https://www.ptcrush.com/' + pos + '.gif');
  }
}

<img />
<button onclick="james()">Halo</button>

预先感谢

Answer 1

从行中删除var：

var pos += 1;

还将变量初始化移到函数外部：

var pos = 1;
function james() {
    ...

Answer 2

这是工作示例中的代码。

以下是一些有关我改进之处的提示：

每次调用时将pos移出该函数，它将重置为1。
除非您想在一轮后停止动画，否则无需清除间隔。
在else语句中删除var。正如您已经在上面定义的那样，无需再次进行此操作。仅在初次启动变量时使用var，let或const。
我已将间隔增加到3秒setInterval(james, 3000)，否则动画将运行得太快。视需要进行调整。

var j = setInterval(james, 3000);

var pos = 1;

function james() {
  if (pos >= 6) {
    pos = 1;
    document.getElementsByTagName('img')[0].setAttribute('src', 'https://www.ptcrush.com/' + pos + '.gif');
  } else {
    pos += 1;
    document.getElementsByTagName('img')[0].setAttribute('src', 'https://www.ptcrush.com/' + pos + '.gif');
  }
}

<img />
<p><button onclick="james()">Hallo</button></p>

Answer 3

您需要将函数pos放到函数外部，并且需要增加超时时间，因为在新图像加载之前，计时器将加载新图像

var pos = 1;
var j = setInterval(james, 4000);

function james() {
  if (pos >= 6) {
    clearInterval(j);
    document
      .getElementsByTagName('img')[0]
      .setAttribute('src', 'https://www.ptcrush.com/' + pos + '.gif');
  } else {
    pos += 1;
    document
      .getElementsByTagName('img')[0]
      .setAttribute('src', 'https://www.ptcrush.com/' + pos + '.gif');
  }
  console.log('pos', pos);
}

<img width="200" height="200" src="" />

具有动画间隔的图像

3 个答案: