如何用定时器制作一个两张图片交替出现的动画

可以使用JavaScript的定时器 setInterval() 方法来实现此动画效果。以下是实现的步骤：

1. 在HTML中创建两个<img>标签，用于显示两张图片。

2. 使用CSS将其中一个<img>标签的display属性设置为"none"，使其一开始不可见。

3. 使用JavaScript获取这两个<img>标签的引用。

4. 定义一个变量来记录当前显示的图片，初始值为0。

5. 使用setInterval()方法创建一个定时器，每隔一定时间执行一次回调函数。

6. 在回调函数中，根据当前显示的图片的值，将其中一个<img>标签的display属性设置为"none"，另一个<img>标签的display属性设置为"block"。

7. 更新当前显示的图片的值，如果已经显示完所有图片，则重新从第一张图片开始。

以下是代码示例：

HTML代码：

<img id="img1" src="image1.jpg">
<img id="img2" src="image2.jpg">

CSS代码：

#img2 {
  display: none;
}

JavaScript代码：

var img1 = document.getElementById("img1");
var img2 = document.getElementById("img2");
var currentImg = 0;

setInterval(function() {
  if (currentImg == 0) {
    img1.style.display = "none";
    img2.style.display = "block";
    currentImg = 1;
  } else {
    img2.style.display = "none";
    img1.style.display = "block";
    currentImg = 0;
  }
}, 1000);

在上面的代码中，定时器每隔1秒钟执行一次回调函数，在回调函数中交替显示两张图片。你可以根据需要调整定时器的执行间隔和图片的数量。