CSS3无缝滚动效果案例




<!DOCTYPE html>
<html>
<head>
<style>
.slider {
  overflow: hidden;
  white-space: nowrap;
  background: #f0f0f0;
}
 
.slide {
  display: inline-block;
  width: 100%;
  transition: transform 0.4s ease-in-out;
}
 
.slide img {
  width: 100%;
  display: block;
}
 
.slide p {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 10px;
}
 
/* 初始化时显示第一张图片 */
.slider .slide:nth-child(1) {
  transform: translateX(0);
}
 
/* 控制按钮样式 */
.slider-nav {
  text-align: center;
  margin-top: 10px;
}
 
.slider-nav button {
  cursor: pointer;
  border: none;
  background: #ddd;
  padding: 5px 10px;
  margin: 0 5px;
  color: #333;
  font-size: 16px;
}
 
.slider-nav button.active {
  background: #007bff;
  color: white;
}
</style>
</head>
<body>
 
<div class="slider">
  <div class="slide">
    <img src="image1.jpg" alt="Image 1">
    <p>图片 1 的描述文字</p>
  </div>
  <div class="slide">
    <img src="image2.jpg" alt="Image 2">
    <p>图片 2 的描述文字</p>
  </div>
  <div class="slide">
    <img src="image3.jpg" alt="Image 3">
    <p>图片 3 的描述文字</p>
  </div>
</div>
 
<div class="slider-nav">
  <button onclick="changeSlide(1)" class="active">&#10094;</button>
  <button onclick="changeSlide(2)">&#10095;</button>
</div>
 
<script>
let currentSlide = 0;
const slides = document.querySelectorAll('.slide');
const navButtons = document.querySelectorAll('.slider-nav button');
 
function changeSlide(direction) {
  // 移除所有按钮的激活状态
  navButtons.forEach((button) => button.classList.remove('active'));
 
  // 根据方向更新currentSlide的值
  if (direction === 1) {
    currentSlide = (currentSlide + 1) % slides.length;
  } else {
    currentSlide = (currentSlide - 1 + slides.length) % slides.length;
  }
 
  // 为当前导航按钮添加激活状态
  navButtons[currentSlide].classList.add('active');
 
  // 更新所有幻灯片的transform属性
  slides.forEach((slide, index) => {
    slide.style.transform = `translateX(${index - currentSlide}00%)`;
  });
}
</script>
 
</body>
</html>

这个代码实例展示了如何使用JavaScript和CSS3创建一个无缝滚动的图片描述框，用户可以通过点击左右箭头来切换图片。图片描述框使用transform属性进行平滑过渡，而不是直接更改图片位置，这样可以避免网页的重绘重排，提供更流畅的用户体验。

CSS3无缝滚动效果案例

评论已关闭

推荐阅读