当前位置：首页 > JavaScript

js 实现图片翻页效果

2026-01-30 19:04:07JavaScript

使用CSS动画实现翻页效果

通过CSS的transform和transition属性创建平滑的翻页动画效果。HTML结构中需要将图片放置在容器内，并利用JavaScript切换类名触发动画。

<div class="flip-container">
  <div class="flipper">
    <img src="image1.jpg" class="front">
    <img src="image2.jpg" class="back">
  </div>
</div>

.flip-container {
  perspective: 1000px;
}
.flipper {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  transition: transform 1s;
}
.flipper.flipped {
  transform: rotateY(180deg);
}
.front, .back {
  position: absolute;
  backface-visibility: hidden;
}
.back {
  transform: rotateY(180deg);
}

document.querySelector('.flipper').classList.toggle('flipped');

使用GSAP库实现高级动画

GSAP提供更精细的动画控制，适合复杂翻页效果。引入GSAP库后，可以通过时间轴控制多步骤动画。

import { gsap } from "gsap";

const tl = gsap.timeline();
tl.to(".flipper", {
  rotationY: 180,
  duration: 1,
  ease: "power2.inOut"
});

实现多图轮播翻页

结合事件监听实现多图片轮播翻页效果。需要维护当前图片索引，并在翻页时更新图片源。

const images = ['img1.jpg', 'img2.jpg', 'img3.jpg'];
let currentIndex = 0;

function flipNext() {
  currentIndex = (currentIndex + 1) % images.length;
  document.querySelector('.back').src = images[currentIndex];
  document.querySelector('.flipper').classList.add('flipped');

  setTimeout(() => {
    document.querySelector('.front').src = images[currentIndex];
    document.querySelector('.flipper').classList.remove('flipped');
  }, 1000);
}

添加触摸滑动支持

通过检测触摸事件实现手势翻页，提升移动端用户体验。需要计算触摸位移来判断翻页方向。

let startX = 0;

flipContainer.addEventListener('touchstart', (e) => {
  startX = e.touches[0].clientX;
});

flipContainer.addEventListener('touchend', (e) => {
  const endX = e.changedTouches[0].clientX;
  if (startX - endX > 50) flipNext();
  if (endX - startX > 50) flipPrev();
});

使用Canvas实现3D翻页

通过Canvas绘制可以实现更复杂的3D翻页效果。需要计算页面弯曲时的顶点坐标变化。

const canvas = document.getElementById('pageFlip');
const ctx = canvas.getContext('2d');

function drawPageFlip(progress) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // 计算弯曲页面的贝塞尔曲线路径
  // 根据progress(0-1)值绘制动画中间帧
}