使用JavaScript进行图像交换不起作用

我想使用

JavaScript

交换图像。当仅使用

section1

时，图像交换工作，但当添加

section2

时，图像交换仅在

section2

上工作（在

section1

中停止交换）。 代码为：

JavaScript

--第1节--

--第2节--

HTML

<img src="images/momo 2.jpg" height="150" width="220" id="image1">
<img src="images/pizza 2.jpg" height="150" width="220" id="image2"><p>

---

应如何使

第1节

工作？

由于您对这两个部分使用相同的

imagetracker

变量，由于值不同，可能会导致问题。因此，对这两个变量使用不同的变量，这可能会解决您的问题

var imagetracker=“m”；
函数更改（）{
var image=document.getElementById（'image1'）；
如果（imagetracker==“m”）{
image.src=“images/momo 2.jpg”；
imagetracker=“t”；
}else if（imagetracker=='t'）{
image.src=“images/taco.jpg”；
imagetracker=“m”；
}
}
var timer=setInterval（'change（）'，2000）；
var imagetracker1=“p2”；
函数更改2（）{
var image=document.getElementById（'image2'）；
如果（imagetracker1==“p2”）{
image.src=“images/pizza 2.jpg”；
imagetracker1=“b”；
}else if（imagetracker1=='b'）{
image.src=“images/burrito 2.jpg”；
imagetracke1r=“p2”；
}
}
var timer2=setInterval（'change2（）'，2000）

您有两个
imagetracker
变量。重命名其中一个，以便每个都有一个

您将
imagetracker
分配给
“m”
和
“p2”
，这将导致错误，因为有两个定义的变量具有相同的名称

您可以将
setInterval
行更改为：

var timer = setInterval(change, 2000);

这将函数作为参数提供，并将间隔设置为每2秒运行一次
change（）
。这也适用于第二个计时器

您的版本很好，字符串可以作为函数传递

是来自W3P的
setInterval
函数的参考
太不可缩放的代码。

让我们尝试修复它：）


函数rotImg（id，url）{
var img=document.getElementById（id）；
var指数=-1；
返回函数（）{
如果（++index>=url.length）index=0；
img.src=url[index]；
};
}
设置间隔（旋转图（'image1'）[
'https://placekitten.com/200/300',
'https://placekitten.com/200/301',
'https://placekitten.com/201/300'
]), 2000);
设置间隔（旋转图（'image2'）[
'https://placekitten.com/300/200',
'https://placekitten.com/300/201',
'https://placekitten.com/301/200'
]), 2000);

setInterval（change，2000）
@Andrew L.感谢您的努力！它最终解决了这个问题。现在图像完全互换了。没问题！如果你还需要什么，尽管问吧！我试图运行您的代码，但图像无法交换。感谢您的代码片段，我已将图像更改为kittens:）
<img src="images/momo 2.jpg" height="150" width="220" id="image1">
<img src="images/pizza 2.jpg" height="150" width="220" id="image2"><p>

var timer = setInterval(change, 2000);

function rotImg(id, urls) {
  var img = document.getElementById(id);
  var index = -1;
  return function() {
    if (++index >= urls.length) index = 0;
    img.src = urls[index];
  };
}
setInterval(rotImg('image1', [
  'images/momo 2.jpg', 
  'images/taco.jpg'
]), 2000);
setInterval(rotImg('image2', [
  'images/pizza 2.jpg', 
  'images/burrito 2.jpg'
]), 2000);