HTML5和CSS3提供了豐富的功能，使得圖片的切換變得更加簡單和靈活，以下是一些常見的圖片切換方法：

1、使用HTML5的<img>標簽和CSS3的樣式切換：

<img class="image" src="image1.jpg" alt="Image 1">
<img class="image" src="image2.jpg" alt="Image 2">
<img class="image" src="image3.jpg" alt="Image 3">

你可以使用CSS3來切換圖片：

.image {
  display: none;
}
.image:first-child {
  display: block;
}

通過改變哪個圖片是display: block;，你可以控制哪個圖片顯示，這種方法簡單，但可能不適合大型圖片切換效果。

2、使用HTML5的<div>標簽和CSS3的動畫效果：

<div class="image-container">
  <div class="image" style="background-image: url('image1.jpg')"></div>
  <div class="image" style="background-image: url('image2.jpg')"></div>
  <div class="image" style="background-image: url('image3.jpg')"></div>
</div>

CSS3可以用來添加動畫效果：

.image-container {
  position: relative;
  height: 300px;
  width: 300px;
}
.image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  opacity: 0;
  transition: opacity 1s;
}
.image:first-child {
  opacity: 1;
}

通過改變哪個圖片是opacity: 1;，你可以控制哪個圖片顯示，這種方法可以實現(xiàn)更復雜的圖片切換效果，但需要更多的CSS3知識。

HTML5和CSS3提供了多種圖片切換的方法，選擇哪種方法取決于你的具體需求和技能水平，希望這篇文章能幫助你更好地理解和使用HTML5和CSS3來切換圖片。