CSS實(shí)現(xiàn)左右滑動效果

在CSS中，我們可以使用transform屬性來實(shí)現(xiàn)左右滑動效果，以下是一個簡單的示例：

HTML代碼：

<div class="container">
  <div class="slider">
    <div class="slide">Slide 1</div>
    <div class="slide">Slide 2</div>
    <div class="slide">Slide 3</div>
  </div>
  <a href="#" class="prev">Prev</a>
  <a href="#" class="next">Next</a>
</div>

CSS代碼：

.container {
  width: 100%;
  overflow: hidden;
}
.slider {
  width: 100%;
  position: relative;
  transform: translateX(0);
  transition: transform 0.5s ease;
}
.slide {
  width: 100%;
  position: absolute;
}
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2em;
  color: #fff;
  text-decoration: none;
}
.prev { left: 0; }
.next { right: 0; }

JavaScript代碼：

let slides = document.querySelectorAll('.slide');
let currentSlide = 0;
let slideInterval = setInterval(nextSlide, 3000); // 每3秒切換一張幻燈片
function nextSlide() {
  slides[currentSlide].classList.remove('active'); // 移除當(dāng)前幻燈片的激活狀態(tài)
  currentSlide = (currentSlide + 1) % slides.length; // 計算下一張幻燈片的索引
  slides[currentSlide].classList.add('active'); // 給下一張幻燈片添加激活狀態(tài)
}

在這個示例中，我們使用了transform屬性來移動幻燈片，并使用transition屬性來添加過渡效果，我們還使用了JavaScript來自動切換幻燈片。