Question

我想使用JavaScript交换图片。如果仅使用section1，则图片交换有效，但在添加section2时，图片的交换仅适用于section2（停止交换section1）。

代码是：

的JavaScript
--section1--

var imagetracker="m";
function change(){
var image=document.getElementById('image1');
if(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);

--section2--

var imagetracker="p2";
function change2(){
var image=document.getElementById('image2');
if(imagetracker=="p2"){
    image.src="images/pizza 2.jpg";
    imagetracker="b";
}else if(imagetracker=='b'){
    image.src="images/burrito 2.jpg";
    imagetracker="p2";
}
}
var timer2 = setInterval('change2()',2000);

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>

如何使section1工作？

Answer 1

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

var imagetracker = "m";

function change() {
  var image = document.getElementById('image1');
  if (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";

function change2() {
  var image = document.getElementById('image2');
  if (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);

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

而不是字符串参数you can use function reference as argument，这可能是更好的方法。

var timer2 = setInterval(change, 2000);

<小时/> 仅供参考：代码字符串未重新开始，因为它有很多安全问题，因为它使用 eval() 。

参考：Why is using the JavaScript eval function a bad idea?

Answer 2

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

您将imagetracker分配给"m"和"p2"会导致错误，因为有两个同名的已定义变量。

您可以将setInterval行更改为：

var timer = setInterval(change, 2000);

这将函数作为参数，并设置每2秒运行change()的间隔。这也适用于第二个计时器。

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

Here是W3Schools {/ 1}}函数的参考资料

Answer 3

代码过于难以控制。
让我们尝试解决它：）

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);

＆＃13;

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', [
  'https://placekitten.com/200/300',
  'https://placekitten.com/200/301',
  'https://placekitten.com/201/300'
]), 2000);
setInterval(rotImg('image2', [
  'https://placekitten.com/300/200',
  'https://placekitten.com/300/201',
  'https://placekitten.com/301/200'
]), 2000);

＆＃13;

<img src="https://placekitten.com/201/300" height="220" id="image1">
<img src="https://placekitten.com/301/200" height="220" id="image2">

＆＃13;

使用JavaScript无法正常工作的图像交换

3 个答案: