js支持键盘控制的左右切换立体式图

当前位置：电视猫 > JavaScript>

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

　　js支持键盘控制的左右切换立体式图

JavaScript实现键盘控制的3D图片左右切换

理解需求

我们要实现一个功能：用户可以通过键盘的左右方向键来控制3D图片的左右切换。

实现思路

HTML结构:
- 与之前类似，我们仍然需要一个容器div和一个ul列表来存放图片。
CSS样式:
- 样式部分与之前基本一致，主要负责3D变换和过渡效果。
JavaScript代码:
- 添加事件监听，监听键盘的左右方向键。
- 当按下左右方向键时，调用函数来控制图片的旋转。
- 更新当前显示的图片索引。

代码示例

HTML


<!DOCTYPE html>

<html>

<head>

  <title>3D图片轮播</title>

  <style>

    /* CSS样式与之前示例相同 */

  </style>

</head>

<body>

  <div class="slider">

    <ul>

      <li><img src="image1.jpg" alt=""></li>

      <li><img src="image2.jpg" alt=""></li>

      </ul>

  </div>

  <script>

    const slider = document.querySelector('.slider');

    const slides = document.querySelectorAll('.slider li');

    let currentSlide = 0;

    const rotateAngle = 60;



    function rotateSlide(direction) {

      slides[currentSlide].style.transform = `rotateY(${direction * rotateAngle}deg)`;

      currentSlide = (currentSlide + direction + slides.length) % slides.length;

      slides[currentSlide].style.transform = 'rotateY(0deg)';

    }



    document.addEventListener('keydown', (event) => {

      if (event.key === 'ArrowLeft') {

        rotateSlide(-1);

      } else if (event.key === 'ArrowRight') {

        rotateSlide(1);

      }

    });

  </script>

</body>

</html>