html中图片的切换代码

今天我们来学习一下如何在HTML页面中切换图片。图片是网页设计中非常重要的一个元素，而切换图片则可以呈现出生动多样的视觉效果。 首先，我们需要在HTML文档中添加一些图片。比如说，我先在文档中添加了两张图片：

这里是一张小狗的图片：

这里是另一张小狗的图片：

接下来，我们需要为这两个图片添加一个切换的按钮，使得用户可以点击按钮来切换图片。我们可以使用一个按钮元素和一些JavaScript代码来实现。 切换图片 我们需要编写一个JavaScript函数(changeImg)，让它在按钮点击时被触发。这个函数应该检查当前显示的图片是哪一张，然后切换到另一张。下面是一个示例的函数代码：

function changeImg() {
  var image1 = "dog1.jpg";
  var image2 = "dog2.jpg";
  var currentimage = document.getElementsByTagName("img")[0].src;
  
  if (currentimage.indexOf(image1) != -1) {
    document.getElementsByTagName("img")[0].src = image2;
    document.getElementsByTagName("img")[0].alt = "小狗2";
  } else {
    document.getElementsByTagName("img")[0].src = image1;
    document.getElementsByTagName("img")[0].alt = "小狗1";
  }
}

现在，我们已经为这些图片添加了一个切换按钮，并且编写了对应的JavaScript代码。当用户点击按钮时，图片将在两张之间切换。注意，这里我们的代码是基于图片的文件路径进行切换，因此需要确保这些图片文件存在于你的服务器上。 希望这个简单的教程能够帮助你更好地学习HTML和JavaScript编程。如果你有任何问题或建议，请随时联系我们。