给一个前端的滑动窗口小案例代码

好的，以下是一个简单的前端滑动窗口的代码示例，你可以参考一下：

HTML代码：

<div class="slider">
  <ul class="slider-wrapper">
    <li class="slider-item">1</li>
    <li class="slider-item">2</li>
    <li class="slider-item">3</li>
    <li class="slider-item">4</li>
    <li class="slider-item">5</li>
  </ul>
</div>

CSS代码：

.slider {
  width: 300px;
  overflow: hidden;
}

.slider-wrapper {
  display: flex;
  transition: transform 0.5s ease;
}

.slider-item {
  flex: 1;
  height: 100px;
  text-align: center;
  background-color: #ccc;
  margin-right: 10px;
  font-size: 24px;
  line-height: 100px;
  color: #fff;
}

JavaScript代码：

const slider = document.querySelector('.slider');
const sliderWrapper = slider.querySelector('.slider-wrapper');
const sliderItems = slider.querySelectorAll('.slider-item');
let currentIndex = 0;
const itemWidth = sliderItems[0].offsetWidth + 10; // 10为margin-right的值
const slideCount = sliderItems.length;
let isAnimating = false;

function startSlide() {
  setInterval(() => {
    if (!isAnimating) {
      currentIndex = (currentIndex + 1) % slideCount;
      slideTo(currentIndex);
    }
  }, 3000);
}

function slideTo(index) {
  isAnimating = true;
  const offsetX = -index * itemWidth;
  sliderWrapper.style.transform = `translateX(${offsetX}px)`;
  setTimeout(() => {
    isAnimating = false;
  }, 500);
}

startSlide();

这个示例实现了一个自动轮播的滑动窗口，每3秒钟自动切换到下一张图片。你可以根据自己的需要进行修改和调整。