js实现图片滑动

实现图片滑动效果

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

使用CSS和JavaScript结合实现滑动

通过CSS设置容器和图片样式，JavaScript处理滑动逻辑：

const slider = document.querySelector('.slider');
const images = document.querySelectorAll('.slider img');
let currentIndex = 0;

function slideTo(index) {
    slider.style.transform = `translateX(-${index * 100}%)`;
}

document.querySelector('.next').addEventListener('click', () => {
    currentIndex = (currentIndex + 1) % images.length;
    slideTo(currentIndex);
});

document.querySelector('.prev').addEventListener('click', () => {
    currentIndex = (currentIndex - 1 + images.length) % images.length;
    slideTo(currentIndex);
});

对应的CSS样式：

.slider {
    display: flex;
    transition: transform 0.5s ease;
    width: 100%;
}

.slider img {
    width: 100%;
    flex-shrink: 0;
}

使用Swiper.js库

Swiper是一个流行的滑动库，可以轻松实现各种滑动效果：

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

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

HTML结构：

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="image1.jpg"></div>
        <div class="swiper-slide"><img src="image2.jpg"></div>
        <div class="swiper-slide"><img src="image3.jpg"></div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

实现自动轮播

在基础滑动上添加自动轮播功能：

let intervalId;
const delay = 3000;

function startAutoSlide() {
    intervalId = setInterval(() => {
        currentIndex = (currentIndex + 1) % images.length;
        slideTo(currentIndex);
    }, delay);
}

function stopAutoSlide() {
    clearInterval(intervalId);
}

slider.addEventListener('mouseenter', stopAutoSlide);
slider.addEventListener('mouseleave', startAutoSlide);

startAutoSlide();

添加触摸支持

为移动设备添加触摸事件支持：

let touchStartX = 0;
let touchEndX = 0;

slider.addEventListener('touchstart', (e) => {
    touchStartX = e.changedTouches[0].screenX;
});

slider.addEventListener('touchend', (e) => {
    touchEndX = e.changedTouches[0].screenX;
    handleSwipe();
});

function handleSwipe() {
    if (touchEndX < touchStartX) {
        // 向左滑动，显示下一张
        currentIndex = (currentIndex + 1) % images.length;
        slideTo(currentIndex);
    }
    if (touchEndX > touchStartX) {
        // 向右滑动，显示上一张
        currentIndex = (currentIndex - 1 + images.length) % images.length;
        slideTo(currentIndex);
    }
}

添加过渡效果

使用CSS添加平滑过渡效果：

.slider {
    transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

这些方法可以根据具体需求进行组合和调整，实现不同风格的图片滑动效果。