零基础手把手：10 分钟制作旋转图片展示器

2024-01-03 14:41:14

使用纯CSS实现旋转图片展示器：用10分钟打造交互式视觉盛宴

想象一下，你在浏览网站时遇到了一个图片展示器，它里面的图片能以令人着迷的方式旋转。无论你是想展示产品、分享旅行记忆还是制作吸引人的视觉效果，旋转图片展示器都是一个完美的选择。

别担心，你不需要成为一名编码专家就能打造自己的旋转展示器。使用纯CSS，你只需10分钟就能完成！

步骤指南

1. 搭建舞台：创建容器元素

首先，创建一个容器元素，它将容纳你的图像和控制元素。这就像搭建一个虚拟画廊，为你的图片提供一个展示空间。

<div id="image-viewer"></div>

2. 添加画作：插入图像

现在，是时候添加你的图像了。将它们插入容器中，让它们成为展出的焦点。

<img src="image.jpg" alt="">

3. 舞台布置：设置图像容器样式

为了让你的图像居中并赋予它们旋转效果，你需要使用CSS设置它们的样式。想象一下这是给你的画作添加框架，让它们在画廊中脱颖而出。

#image-viewer {
  display: flex;
  justify-content: center;
  align-items: center;
}

#image-viewer img {
  transform: rotate(0deg);
  transition: transform 1s ease-in-out;
}

4. 掌控旋转：创建旋转按钮

接下来，是时候赋予你的展示器交互性了。创建两个按钮，一个用于向左旋转，另一个用于向右旋转。就好像你是一位指挥家，这些按钮将指挥你的图像进行旋转交响曲。

<button id="rotate-left">向左旋转</button>
<button id="rotate-right">向右旋转</button>

5. 响应号召：添加事件监听器

现在，让你的按钮发挥作用。为每个按钮添加一个事件监听器，当用户单击它们时就会触发。想象一下这是给你的图像下达旋转命令。

document.getElementById("rotate-left").addEventListener("click", function() {
  // 向左旋转图像
});

document.getElementById("rotate-right").addEventListener("click", function() {
  // 向右旋转图像
});

6. 编排旋转：编写旋转函数

最后，你需要一个旋转函数，它将根据按钮的ID确定旋转方向，并更新图像的transform属性。就像一位编舞，它会告诉你的图像如何旋转。

function rotateImage(direction) {
  // 获取当前的旋转角度
  let currentRotation = Number(image.style.transform.replace(/rotate\((.*?)deg\)/, "$1"));

  // 根据按钮的ID确定旋转方向
  if (direction === "left") {
    currentRotation -= 90;
  } else if (direction === "right") {
    currentRotation += 90;
  }

  // 更新图像的旋转角度
  image.style.transform = `rotate(${currentRotation}deg)`;
}