html中javascript图片切换

HTML和JavaScript可以结合创建动态图片轮播效果，这种效果通常称为图片切换或图像滑动展示。以下是基本步骤：

1. **HTML结构**：
创建一个包含多个`<img>`标签的容器，并给它们加上相同的ID以便控制切换。还可以添加一个用于导航的按钮元素。

<div id="image-slider">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <!-- 更多图片 -->
</div>
<button id="prev">上一张</button>
<button id="next">下一张</button>

2. **JavaScript部分**：
使用`JavaScript`监听点击事件，通过改变`src`属性来切换图片。例如，可以设置两个变量存储当前显示的图片索引和总图片数。

let currentIndex = 0;
const images = document.querySelectorAll('#image-slider img');

document.getElementById('prev').addEventListener('click', function() {
  if (currentIndex > 0) {
    currentIndex--;
    images[currentIndex].style.display = 'block';
    images[currentIndex + 1].style.display = 'none';
  }
});

document.getElementById('next').addEventListener('click', function() {
  currentIndex++;
  if (currentIndex < images.length - 1) {
    images[currentIndex].style.display = 'block';
    images[currentIndex - 1].style.display = 'none';
  }
});