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>