js实现3D图片逐张轮播幻灯片特效源

当前位置：电视猫 > JavaScript>

电视猫时间： 2024-08-29 08:15:03

　　js实现3D图片逐张轮播幻灯片特效源

基于JavaScript实现3D图片逐张轮播幻灯片特效

理解需求

我们要实现的效果是：将多张图片以3D的形式展示，并且可以通过点击按钮或自动播放的方式逐张切换。

实现思路

HTML结构:
- 创建一个容器div，作为幻灯片的舞台。
- 在容器div内放置一个ul，每个li元素代表一张图片。
CSS样式:
- 给容器div设置透视效果，让图片产生3D立体感。
- 给每个li元素设置绝对定位，并通过transform属性控制其3D变换。
JavaScript代码:
- 获取DOM元素。
- 计算每个li元素的宽度和高度。
- 使用JavaScript控制li元素的transform属性，实现3D旋转和位移。
- 可以通过定时器实现自动播放，或者通过点击按钮手动切换。

代码示例

HTML

<!DOCTYPE html>
<html>
<head>
  <title>3D图片轮播</title>
  <style>
    .slider {
      width: 400px;
      height: 300px;
      perspective: 1000px;
      overflow: hidden;
    }
    .slider ul {
      position: absolute;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      transition: transform 1s;
    }
    .slider li {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
    }
    .slider li:nth-child(1) {
      transform: rotateY(0deg);
    }
    .slider li:nth-child(2) {
      transform: rotateY(-60deg);
    }
    // ... 其他li的transform属性
  </style>
</head>
<body>
  <div class="slider">
    <ul>
      <li><img src="image1.jpg" alt=""></li>
      <li><img src="image2.jpg" alt=""></li>
      </ul>
  </div>
  <script>
    // JavaScript代码，用于控制图片的切换
  </script>
</body>
</html>

JavaScript代码示例（简化版）

JavaScript

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

function rotateSlide(direction) {
  const rotateAngle = direction === 'next' ? -60 : 60;
  slides[currentSlide].style.transform = `rotateY(${rotateAngle}deg)`;
  currentSlide = (currentSlide + direction === 'next' ? 1 : slides.length - 1) % slides.length;
  slides[currentSlide].style.transform = 'rotateY(0deg)';
}

// 点击按钮切换
const prevBtn = document.getElementById('prev');
const nextBtn = document.getElementById('next');
prevBtn.addEventListener('click', () => rotateSlide('prev'));
nextBtn.addEventListener('click', () => rotateSlide('next'));