js图片轮播和点击切换

你可以使用以下代码实现一个简单的JavaScript图片轮播和点击切换功能：

HTML部分：

<div class="slideshow">
  <img src="image1.jpg" altImage 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>
<button onclick="previousSlide()">Previous</button>
<button onclick="nextSlide()">Next</button>

CSS部分：

.slideshow {
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.slideshow img {
  width: 100%;
  height: 100%;
  display: none;
}

.slideshow img.active {
  display: block;
}

JavaScript部分：

var slides = document.querySelectorAll('.slideshow img');
var currentSlide = 0;

function showSlide(n) {
  slides[currentSlide].classList.remove('active');
  
  if (n > slides.length - 1) {
    currentSlide = 0;
  } else if (n < 0) {
    currentSlide = slides.length - 1;
  } else {
    currentSlide = n;
  }
  
  slides[currentSlide].classList.add('active');
}

function previousSlide() {
  showSlide(currentSlide - 1);
}

function nextSlide() {
  showSlide(currentSlide + 1);
}

showSlide(currentSlide);

这段代码会创建一个包含图片的幻灯片展示区域，并且有一个向前和向后切换图片的按钮。通过点击按钮，调用相应的JavaScript函数来显示前一张或后一张图片。CSS部分用于设置幻灯片的样式，JavaScript部分用于处理图片的显示和切换逻辑。你可以根据自己的需求修改样式和图片。