当前位置：首页 > JavaScript

js实现slide

2026-02-01 21:50:01JavaScript

JavaScript 实现 Slide 效果

使用 JavaScript 实现幻灯片（Slide）效果可以通过多种方式完成，包括原生 JavaScript 和第三方库（如 Swiper、Slick）。以下是几种常见的方法：

原生 JavaScript 实现基础 Slide

通过操作 DOM 元素的样式和类名实现简单的幻灯片切换效果。

// 获取幻灯片容器和幻灯片项
const slider = document.querySelector('.slider');
const slides = document.querySelectorAll('.slide');
let currentSlide = 0;

// 切换到指定幻灯片
function goToSlide(n) {
    slides.forEach((slide, index) => {
        slide.style.display = index === n ? 'block' : 'none';
    });
    currentSlide = n;
}

// 下一张幻灯片
function nextSlide() {
    currentSlide = (currentSlide + 1) % slides.length;
    goToSlide(currentSlide);
}

// 上一张幻灯片
function prevSlide() {
    currentSlide = (currentSlide - 1 + slides.length) % slides.length;
    goToSlide(currentSlide);
}

// 自动播放
let slideInterval = setInterval(nextSlide, 3000);

// 初始化显示第一张幻灯片
goToSlide(0);

使用 CSS Transitions 实现平滑切换

结合 CSS 过渡效果实现更平滑的幻灯片切换。

const slider = document.querySelector('.slider');
const slides = document.querySelectorAll('.slide');
let currentSlide = 0;

function goToSlide(n) {
    slides.forEach((slide) => {
        slide.style.transform = `translateX(-${n * 100}%)`;
    });
    currentSlide = n;
}

function nextSlide() {
    currentSlide = (currentSlide + 1) % slides.length;
    goToSlide(currentSlide);
}

function prevSlide() {
    currentSlide = (currentSlide - 1 + slides.length) % slides.length;
    goToSlide(currentSlide);
}

// 初始化
goToSlide(0);

CSS 部分：

.slider {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.slide {
    width: 100%;
    position: absolute;
    transition: transform 0.5s ease;
}

使用 Swiper 库实现高级 Slide

Swiper 是一个功能强大的幻灯片库，支持触摸滑动、分页器、导航按钮等功能。

安装 Swiper：

npm install swiper

HTML 结构：

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

JavaScript 初始化：

import Swiper from 'swiper';
import 'swiper/css';

const swiper = new Swiper('.swiper', {
    loop: true,
    pagination: {
        el: '.swiper-pagination',
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});

使用 Slick 库实现响应式 Slide

Slick 是另一个流行的幻灯片库，支持响应式设计和多种配置选项。

安装 Slick：

npm install slick-carousel

HTML 结构：

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

JavaScript 初始化：

js实现slide

import $ from 'jquery';
import 'slick-carousel';

$('.slider').slick({
    dots: true,
    infinite: true,
    speed: 300,
    slidesToShow: 1,
    adaptiveHeight: true,
});