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);
}这些方法可以根据具体需求进行组合和调整，实现不同风格的图片滑动效果。
