js图片轮播和点击切换

你可以使用 JavaScript 和 HTML 实现图片轮播和点击切换。下面是一个简单的示例：

HTML 代码：

<div id="slider">
  <img src="img1.jpg" alt="Image 1">
  <img src="img2.jpg" alt="Image 2">
  <img src="img3.jpg" alt="Image 3">
</div>
<button id="prev">Prev</button>
<button id="next">Next</button>

JavaScript 代码：

var slider = document.getElementById("slider");
var prevBtn = document.getElementById("prev");
var nextBtn = document.getElementById("next");
var index = 0; // 当前显示的图片索引

// 切换到指定索引的图片
function changeImage(i) {
  // 隐藏所有图片
  for (var j = 0; j < slider.children.length; j++) {
    slider.children[j].style.display = "none";
  }
  // 显示指定索引的图片
  slider.children[i].style.display = "block";
  index = i; // 更新当前显示的图片索引
}

// 点击 Prev 按钮时切换到上一张图片
prevBtn.onclick = function() {
  index--;
  if (index < 0) {
    index = slider.children.length - 1;
  }
  changeImage(index);
};

// 点击 Next 按钮时切换到下一张图片
nextBtn.onclick = function() {
  index++;
  if (index >= slider.children.length) {
    index = 0;
  }
  changeImage(index);
};

// 初始化，显示第一张图片
changeImage(0);

上面的代码中，我们通过 `document.getElementById()` 方法获取 HTML 元素，并通过 `onclick` 事件监听按钮的点击事件。在 `changeImage()` 函数中，我们通过设置 `display` 样式将图片显示或隐藏。最后，我们通过调用 `changeImage(0)` 初始化，显示第一张图片。