当前位置：首页 > JavaScript

js实现slide

2026-04-06 14:50:52JavaScript

JavaScript 实现 Slide 效果

使用 JavaScript 实现滑动（Slide）效果可以通过多种方式完成，以下是几种常见的方法：

使用 CSS Transition 和 JavaScript

通过结合 CSS 的 transition 属性和 JavaScript 的类操作，可以实现平滑的滑动效果。

js实现slide

<style>
  .slide-element {
    width: 100px;
    height: 100px;
    background-color: blue;
    transition: transform 0.5s ease;
  }
  .slide-right {
    transform: translateX(100px);
  }
</style>

<div class="slide-element" id="slider"></div>
<button onclick="slide()">Slide Right</button>

<script>
  function slide() {
    const element = document.getElementById('slider');
    element.classList.toggle('slide-right');
  }
</script>

使用 JavaScript 动画 API

通过 requestAnimationFrame 实现更精细的动画控制。

function slide(element, distance, duration) {
  const start = performance.now();
  const startX = 0;

  function animate(currentTime) {
    const elapsed = currentTime - start;
    const progress = Math.min(elapsed / duration, 1);
    element.style.transform = `translateX(${progress * distance}px)`;

    if (progress < 1) {
      requestAnimationFrame(animate);
    }
  }

  requestAnimationFrame(animate);
}

const box = document.getElementById('slider');
slide(box, 100, 500); // 滑动 100px，持续 500ms

使用 CSS Animation 和 JavaScript

通过动态添加 CSS 动画类实现滑动效果。

js实现slide

<style>
  @keyframes slideRight {
    from { transform: translateX(0); }
    to { transform: translateX(100px); }
  }
  .slide-animation {
    animation: slideRight 0.5s forwards;
  }
</style>

<div id="slider" style="width:100px; height:100px; background:red;"></div>
<button onclick="startSlide()">Slide</button>

<script>
  function startSlide() {
    const element = document.getElementById('slider');
    element.classList.add('slide-animation');
    setTimeout(() => {
      element.classList.remove('slide-animation');
    }, 500);
  }
</script>

使用第三方库（如 jQuery）

如果项目中已引入 jQuery，可以使用其内置的滑动方法。

$('#slider').animate({ left: '100px' }, 500);

横向轮播图实现

以下是实现一个简单的横向轮播图的完整代码示例：

<style>
  .carousel {
    width: 300px;
    height: 200px;
    overflow: hidden;
    position: relative;
  }
  .carousel-inner {
    display: flex;
    transition: transform 0.5s ease;
  }
  .carousel-item {
    min-width: 100%;
  }
</style>

<div class="carousel">
  <div class="carousel-inner">
    <div class="carousel-item" style="background:red;">Slide 1</div>
    <div class="carousel-item" style="background:green;">Slide 2</div>
    <div class="carousel-item" style="background:blue;">Slide 3</div>
  </div>
</div>
<button onclick="prevSlide()">Prev</button>
<button onclick="nextSlide()">Next</button>

<script>
  let currentIndex = 0;
  const inner = document.querySelector('.carousel-inner');
  const items = document.querySelectorAll('.carousel-item');
  const maxIndex = items.length - 1;

  function updateSlide() {
    inner.style.transform = `translateX(-${currentIndex * 100}%)`;
  }

  function nextSlide() {
    currentIndex = currentIndex >= maxIndex ? 0 : currentIndex + 1;
    updateSlide();
  }

  function prevSlide() {
    currentIndex = currentIndex <= 0 ? maxIndex : currentIndex - 1;
    updateSlide();
  }
</script>