js滑块banner

JS 滑块 Banner（Slider Banner）是一种常见的网页轮播图效果，用户可以通过鼠标或触摸屏幕来切换图片。以下是一个使用 JavaScript 实现滑块 Banner 的示例代码：

HTML 代码：

<div class="slider">
  <div class="slides">
    <img src="image1.jpg">
    <img src="image2.jpg">
    <img src="image3.jpg">
  </div>
  <div class="dots"></div>
</div>

CSS 代码：

.slider {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  margin: 0 auto;
}

.slides {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease-in-out;
}

.slides img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: gray;
  margin: 0 10px;
  cursor: pointer;
}

.dot.active {
  background-color: white;
}

JavaScript 代码：

const slider = document.querySelector('.slider');
const slides = slider.querySelector('.slides');
const images = slides.querySelectorAll('img');
const dots = slider.querySelector('.dots');
let currentSlide = 0;

// 创建小圆点
images.forEach((image, index) => {
  const dot = document.createElement('div');
  dot.classList.add('dot');
  if (index === currentSlide) {
    dot.classList.add('active');
  }
  dot.addEventListener('click', () => {
    goToSlide(index);
  });
  dots.appendChild(dot);
});

// 切换到指定的图片
function goToSlide(index) {
  slides.style.transform = `translateX(-${index * 100}%)`;
  dots.querySelector('.active').classList.remove('active');
  dots.children[index].classList.add('active');
  currentSlide = index;
}

// 自动轮播
setInterval(() => {
  let index = currentSlide + 1;
  if (index >= images.length) {
    index = 0;
  }
  goToSlide(index);
}, 5000);

此代码会创建一个滑块 Banner，其中包含三张图片和相应的小圆点，用户可以通过单击小圆点或者自动轮播的方式来切换图片。请注意，此代码仅作为示例，实际应用中可能需要根据具体情况进行调整和优化。