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'));