js两张图片来回切换

在JavaScript中实现两张图片来回切换的功能，通常涉及到DOM操作和事件监听。以下是实现这一功能的基础概念、优势、类型、应用场景以及具体的代码示例。

基础概念

DOM操作：JavaScript可以操作HTML文档对象模型（DOM），从而改变页面的内容和结构。
事件监听：通过监听用户的交互事件（如点击事件），可以触发相应的函数执行。
定时器：使用setInterval或setTimeout可以实现定时切换图片的效果。

优势

交互性：用户可以直接通过点击或自动切换来查看不同的图片。
动态内容：可以根据需要动态更改显示的图片，适合展示轮播图、广告等。
易于实现：使用基本的JavaScript和HTML即可完成，无需复杂的框架。

类型

手动切换：用户通过点击按钮来切换图片。
自动切换：设定时间间隔，图片自动更换。

应用场景

轮播图：网站首页或产品展示页常用的图片切换效果。
广告展示：在网页的侧边栏或顶部轮播不同的广告图片。
教程演示：在教学网站上，通过切换图片来展示不同步骤。

示例代码

以下是一个简单的JavaScript示例，实现两张图片的手动和自动来回切换：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Switcher</title>
<style>
  #imageContainer {
    width: 300px;
    height: 200px;
    overflow: hidden;
  }
  img {
    width: 100%;
    height: auto;
  }
</style>
</head>
<body>

<div id="imageContainer">
  <img id="switchImage" src="image1.jpg" alt="Image 1">
</div>
<button onclick="switchImage()">Switch Image</button>

<script>
  let currentImageIndex = 0;
  const images = ["image1.jpg", "image2.jpg"];
  
  function switchImage() {
    currentImageIndex = (currentImageIndex + 1) % images.length;
    document.getElementById('switchImage').src = images[currentImageIndex];
  }

  // 自动切换图片，每3秒切换一次
  setInterval(switchImage, 3000);
</script>

</body>
</html>