[分享]css两张图片交替显示

在网页设计中，有时候需要让两张图片进行交替显示。这时候我们可以使用CSS来实现这种效果。

img {
  display: none;
}

img:first-child {
  display: block;
} 

首先，我们给所有的图片添加样式`display:none`，使得它们在页面加载时不可见。然后，使用:first-child伪类选择器将第一张图片设为可见`display:block`，这样页面加载后第一张图片就会显示。

var images = document.getElementsByTagName('img');
var index = 1;

function changeImage() {
  images[index].style.display = 'none';
  index = (index + 1) % images.length;
  images[index].style.display = 'block';
}

setInterval(changeImage, 3000); 

接下来需要使用JavaScript来实现两张图片交替显示的功能，我们可以使用setInterval函数来周期性地改变图片的可见性。

首先，我们获取页面上所有的图片，并定义一个变量index来表示当前显示的是第几张图片（初始值为1，因为我们默认第一张图片是可见的）。然后编写changeImage函数，每次调用此函数时，它会将当前显示的图片设为不可见，将index增加1（如果已经到了最后一张图片，则回到第一张），并将下一张图片设为可见。最后，我们用setInterval函数来周期性地调用changeImage函数。在上面的例子中，我们将间隔时间设置为3秒（即3000毫秒）。