如何为HTML/JS滑块实现平滑左右滑动过渡效果？

DevOps 小满

2026-8-12

实现滑块左右平滑滑动过渡的改造方案

当前你的滑块通过切换display属性实现淡入淡出，要改成左右平滑滑动，核心是利用CSS的transform和transition实现容器平移，同时调整JS逻辑来控制滑动方向和位置。以下是具体改造步骤：

一、修改CSS样式

主要调整滑块容器的布局，让所有幻灯片横向排列，并开启过渡动画：

* {
  box-sizing: border-box
}

.header{
  text-align: center;
  margin-top: 20px;
  margin-bottom: 40px;
  color: rgb(192, 0, 144);
  font-size: 50px;
}

body {
  font-family: Verdana, sans-serif;
}

.SingleSlide {
  height: 650px;
  background-color: lightgrey;
  padding: 90px;
  border-radius: 40px;
  flex-shrink: 0; /* 禁止幻灯片收缩 */
  width: 100%; /* 每张幻灯片占满容器宽度 */
}
h2{
  color: rgb(192, 0, 144);
}
h3{
  color: rgb(80, 80, 80);
}
.info {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

img {
  height: 200px;
  width: 280px;
  border-radius: 40px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  -webkit-box-shadow: 0px 0px 24px 0px rgba(66, 68, 90, 1);
  -moz-box-shadow: 0px 0px 24px 0px rgba(66, 68, 90, 1);
  box-shadow: 0px 0px 24px 0px rgba(66, 68, 90, 1);
}

.Slides {
  max-width: 1000px;
  position: relative;
  margin: auto;
  -webkit-box-shadow: 0px 0px 24px 0px rgba(66, 68, 90, 1);
  -moz-box-shadow: 0px 0px 24px 0px rgba(66, 68, 90, 1);
  box-shadow: 0px 0px 24px 0px rgba(66, 68, 90, 1);
  border-radius: 40px;
  overflow: hidden; /* 隐藏超出容器的幻灯片 */
}

/* 新增幻灯片容器，用于横向排列 */
.slides-container {
  display: flex;
  transition: transform 0.6s ease; /* 平滑过渡动画 */
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: rgb(192, 0, 144);
  font-weight: bold;
  font-size: 18px;
  transition: background-color 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  font-size: 50px;
  z-index: 10; /* 确保按钮在幻灯片上方 */
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
  background-color: rgba(128,128,128,0.8); /* 半透明背景更友好 */
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active,
.dot:hover {
  background-color: rgb(192, 0, 144);
}

/* 移除原来的fade动画，改用滑动过渡 */

二、调整HTML结构

将所有SingleSlide包裹到新增的slides-container容器中：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Our Employees</title>
</head>
<body>
  <div class="header"> Our Employees</div>
  <div class="Slides">
    <!-- 新增幻灯片容器 -->
    <div class="slides-container">
      <div class="SingleSlide">
          <div class="profile">
            <img src="data/emp1.jpg">
            <div class="info"> 
              <h2> Anna Wesołowska</h2>
              <h3> Product Manager</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget vestibulum nibh. Nulla volutpat faucibus pulvinar. Praesent sodales maximus ante, a mattis mi dictum rhoncus. Vivamus magna leo, rutrum sit amet facilisis at, suscipit a urna. Nulla aliquet at nibh ac fermentum. Phasellus placerat leo a est faucibus, at venenatis.</p>
            </div>
          </div>
      </div>

      <div class="SingleSlide">
        <div class="profile"> <!-- 修复之前缺失的class -->
          <img src="data/emp2.jpg">
          <div class="info"> 
            <h2> Maria Ryś </h2>
            <h3> Accountant </h3>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras maximus massa rhoncus metus convallis, sed dapibus augue scelerisque. Nunc aliquet varius aliquet. Etiam consequat congue feugiat. Aliquam erat volutpat. Vivamus ultricies diam vitae lacus efficitur vehicula vitae in arcu. Nunc dui elit, aliquet vitae tristique nec, volutpat quis nulla. Cras.</p>
          </div>
        </div>
      </div>

      <div class="SingleSlide">
        <div class="profile">
          <img src="data/emp3.jpg">
          <div class="info"> 
            <h2> Zbigniew Żaba </h2>
            <h3> Intern </h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas accumsan quis sem et volutpat. Pellentesque ultrices tempus feugiat. Duis facilisis vel risus in consequat. Nam rutrum odio libero, a elementum augue porta in. Maecenas posuere porta leo, eget volutpat sapien sodales ut. Integer sodales lacus sed nulla cursus congue. Pellentesque.</p>
          </div>
        </div>
      </div>

      <div class="SingleSlide">
        <div class="profile">
          <img src="data/emp4.jpg">
          <div class="info"> 
            <h2> Jolanta Konieczna </h2>
            <h3> Receptionist </h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec arcu nec nisi hendrerit ultricies. In metus sem, accumsan vel nisl at, pharetra volutpat massa. Morbi quis nunc non tellus pulvinar varius. Nunc consequat in erat non maximus. Nullam et porta erat. Integer non elit vitae tortor maximus ullamcorper sit.</p>
          </div>
        </div>
      </div>

      <div class="SingleSlide">
        <div class="profile">
          <img src="data/emp5.jpg">
          <div class="info"> 
            <h2> Amelia Cron </h2>
            <h3> Data Analyst </h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius sodales augue, vel convallis elit elementum eget. Nunc lacus erat, vehicula sit amet luctus id, rutrum id libero. Fusce leo odio, bibendum ac vestibulum ac, porttitor eget orci. Praesent ac urna in tellus egestas lobortis ut vel eros. Ut fermentum.</p>
          </div>
        </div>
      </div>
    </div>

    <a class="prev" onclick="plusSlides(-1)">❮</a>
    <a class="next" onclick="plusSlides(1)">❯</a>

  </div>
  <br>

  <div style="text-align:center">
    <span class="dot" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(2)"></span>
    <span class="dot" onclick="currentSlide(3)"></span>
    <span class="dot" onclick="currentSlide(4)"></span>
    <span class="dot" onclick="currentSlide(5)"></span>
    
  </div>

  <script src="script.js"></script>
</body>
</html>

三、重写JavaScript逻辑

不再切换display，而是通过计算偏移量来移动幻灯片容器，同时处理循环切换和方向：

let slideIndex = 1;
const slidesContainer = document.querySelector('.slides-container');
const slides = document.getElementsByClassName("SingleSlide");
const dots = document.getElementsByClassName("dot");

// 初始化显示第一张
updateSlidePosition();
updateActiveDot();

function updateSlidePosition() {
  // 计算偏移量：每张幻灯片宽度的百分比，负数表示向左移动
  const offset = -(slideIndex - 1) * 100;
  slidesContainer.style.transform = `translateX(${offset}%)`;
}

function updateActiveDot() {
  for (let i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  dots[slideIndex - 1].className += " active";
}

function plusSlides(n) {
  slideIndex += n;
  // 处理循环：超出边界时回到对应位置
  if (slideIndex > slides.length) {
    slideIndex = 1;
  } else if (slideIndex < 1) {
    slideIndex = slides.length;
  }
  updateSlidePosition();
  updateActiveDot();
}

function currentSlide(n) {
  slideIndex = n;
  updateSlidePosition();
  updateActiveDot();
}

关键说明

用slides-container包裹所有幻灯片，通过flex横向排列，配合overflow:hidden只显示当前幻灯片
通过transform: translateX()控制容器平移，结合transition实现平滑滑动
移除原有的fade动画，改为基于位置的过渡，更符合左右滑动的视觉逻辑
修复了HTML中部分profile容器缺失class的问题，保证布局一致性

内容的提问来源于stack exchange，提问作者fantomx775

如何为HTML/JS滑块实现平滑左右滑动过渡效果？

一、修改CSS样式 #

二、调整HTML结构 #

三、重写JavaScript逻辑 #

关键说明 #

一、修改CSS样式

二、调整HTML结构

三、重写JavaScript逻辑

关键说明