本文作者将教您以另一种方式实现轮播交互，享受〜

有很多方法可以实现轮播地图。大多数儿童鞋也用于实现名为“通用”的动态面板。但是你如何为一些特殊的旋转木马做得更好？

例如，以下示例效果：

在线预览

这是一个具有3D效果的旋转木马。不同尺寸的多个图像具有视差效果。点击两侧的图片进行移动和调整大小。所选图像始终位于中心。不多说，让我们看看如何在不使用动态面板的情况下实现这一目标。

实施

1.准备三张图像，设置每张图像的位置和大小，如图所示

图1（pic1）设置

图2（pic2）设置

图3（pic3）设置

设置图像位置和大小后，如上图所示，我们分析交互：

以pic1为例，其位置有三种情况：位置1，位置2和位置3.

当pic1位于位置1和3时，单击pic1，pic1将移动到位置2并变大，当pic1位于位置2时，单击不会相互作用。

类似地，pic2和pic3的点击交互与pic1相同。

图像的位移在三个固定点。图片的大小是两个。当移动到中间时，即位置2是最大的，并且边的大小相同。

图像需要自动旋转，因此我们可以考虑在页面加载时触发图像的鼠标单击事件。这可以实现图像的位移和大小。

鼠标的单击事件可以触发事件的执行，并且不能实现事件循环执行，并且不能实现自动旋转。

总之，我们可以考虑通过设置变量来控制事件的连续执行。

通过对上述相互作用的分析，我们可以假设初始状态：

Pic1位于第1位变量：var1=1;

Pic2在第2位变量：var2=2;

Pic3在第3位变量：var3=3;

大图像宽度=wb

大图片高度=hb

小图像宽度=ws

小高度=hs

Pic1位置（x1，y1）

Pic2位置（x2，y2）

Pic3位置（x3，y3）

如图所示：

2.鼠标单击交互设置

Pic1鼠标单击交互设置：

首先，判断pic1的位置是在位置1还是在位置3（判断在位置2没有位移时）;

如果在第1位：

将pic1移动到位置2并且尺寸变大，pic2在位置2，因此它将变小并移动到位置3;由于pic3位于第3位，因此只需将其移动到位置1而不改变大小。最后标记每张图片的当前位置：var1=2; VAR2=3; VAR3=1。

如果在第3位：

将pic1移动到位置2，pic1尺寸变大，pic3变小并转移到位置1，pic2移动到位置3，最后标记每个图像的位置：var1=2; VAR2=3; VAR3=1。

同样，您可以设置pic2和pic3之间的鼠标单击交互：

3.页面加载事件设置

当页面被加载时，判断图片的位置，即确定三个变量值，并根据不同的位置触发每个图片的鼠标点击事件，以实现图片的位移。当再次触发页面加载事件时，实现了一个闭环，图片是旋转木马可以自动循环，由于变量的应用，整个原型可以在任何场景中使用，变量值可以改变最多，这大大增强了原型的可重用性和可扩展性。

« 做网络推广你必须知道这25个专业词 | 移动产品设计完整指南 »