div css轮播制作

使用纯CSS实现轮播

HTML结构需要包含轮播容器和轮播项，通过CSS的动画和关键帧控制轮播效果。

<div class="slider">
  <div class="slider-items">
    <div class="slider-item">Slide 1</div>
    <div class="slider-item">Slide 2</div>
    <div class="slider-item">Slide 3</div>
  </div>
</div>

.slider {
  width: 100%;
  overflow: hidden;
}
.slider-items {
  display: flex;
  animation: slide 10s infinite;
}
.slider-item {
  flex: 0 0 100%;
}
@keyframes slide {
  0%, 33% { transform: translateX(0); }
  33%, 66% { transform: translateX(-100%); }
  66%, 100% { transform: translateX(-200%); }
}

使用CSS和少量JavaScript增强交互

通过添加导航按钮和指示器，提升轮播的用户体验。

<div class="slider">
  <div class="slider-items">
    <div class="slider-item active">Slide 1</div>
    <div class="slider-item">Slide 2</div>
    <div class="slider-item">Slide 3</div>
  </div>
  <button class="prev">Prev</button>
  <button class="next">Next</button>
  <div class="dots">
    <span class="dot active"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>

.slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.slider-items {
  display: flex;
  transition: transform 0.5s ease;
}
.slider-item {
  flex: 0 0 100%;
}
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.prev { left: 10px; }
.next { right: 10px; }
.dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}
.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
  margin: 0 5px;
  cursor: pointer;
}
.dot.active { background: #333; }

const items = document.querySelectorAll('.slider-item');
const dots = document.querySelectorAll('.dot');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');
let currentIndex = 0;

function updateSlider() {
  document.querySelector('.slider-items').style.transform = `translateX(-${currentIndex * 100}%)`;
  items.forEach(item => item.classList.remove('active'));
  dots.forEach(dot => dot.classList.remove('active'));
  items[currentIndex].classList.add('active');
  dots[currentIndex].classList.add('active');
}

prevBtn.addEventListener('click', () => {
  currentIndex = (currentIndex > 0) ? currentIndex - 1 : items.length - 1;
  updateSlider();
});

nextBtn.addEventListener('click', () => {
  currentIndex = (currentIndex < items.length - 1) ? currentIndex + 1 : 0;
  updateSlider();
});

dots.forEach((dot, index) => {
  dot.addEventListener('click', () => {
    currentIndex = index;
    updateSlider();
  });
});

响应式轮播设计

通过媒体查询确保轮播在不同设备上都能正常显示。

@media (max-width: 768px) {
  .slider-item {
    font-size: 14px;
  }
  .prev, .next {
    font-size: 12px;
  }
  .dot {
    width: 8px;
    height: 8px;
  }
}

添加过渡效果

通过CSS过渡属性使轮播切换更加平滑。

.slider-items {
  transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}