Axure教程：用另一种方式实现轮播图交互

Axure教程：用另一种方式实现轮播图交互

本文作者将教你用另一种方式实现交互式图片轮播，欣赏~

carousel的图片展示方式有很多种，大部分朋友都习惯用可以称之为“全能”的静态数据板来展示。但是，一些特殊图片的旋转如何才能更逼真呢？

如上例所示:

在线浏览

那时候有一种图片转盘，结果立体。几个不同规格的图片被分组在一起有很好的效果，脸部两侧的图片被击中会停止位移并调整大小。所选图片位于管理中心的开头和结尾。没什么好说的。让我们来看看如何消除静态数据，以真正显示这种结果。

先轸

1.准备三张图片，如图设置每张图片的状态和大小。

图1(图1)设置

图2(图2)设置

图3(图3)设置

如图设置好图片的位置和大小后，说明交互动作:

以pic1为例，其状态有三种情况:状态1、状态2、状态3。

当pic1在1号位和3号位时，面对面攻击pic1和pic1会移动到2号位，变大。当pic1处于位置2时，面对面的攻击不会终止交互。

类似地，pic2和pic3之间的面对面交互与pic1相同。

图的位移有三个实边，图的大小是两个。当它移动到最管理中心，也就是位置2时，它是最大的，两边大小一样。

图片是要求在转轴上播放的，所以当页面已经加载完毕的时候，你就可以想想接触图片的电脑鼠标了。那真的能表现出画面的位移和大小变换。

鼠标的点击可以触发紧急事件的实施，但在一个紧急事件周期内并不能真正实施，也不能真正在转轴上广播。

综上所述，你可以考虑通过设置自变量的全过程来把握混沌的连续执行。

在整个过程的交互式解释之后，你可以假设在初始形状下:

1pic1有1个时分自变量的状态:var1=1

pic2一直在位置2时的自变量:var2=2

pic3一直在位置3时的自变量:var3=3

地图的总宽度=wb

地图下=hb

小图总宽度=ws

低图=hs

图1状态(x1，y1)

图2状态(x2，y2)

3图3状态(x3，y3)

如下图所示:

2.电脑鼠标面对面交互设置

1图1鼠标点击交互设置:

首先判断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，初始logo表标记今天每张图片的状态，即:var1=2；var2=3；var3=1.

您还可以设置计算机鼠标在pic2和pic3之间的面对面交互:

3.该页面包含事故的设置。

页面加载时，判断图片的状态就是判断三种变量类型。根据状态的不同，每张图片的鼠标点击都是乱七八糟的，真正显示出来的是图片的位移。当页面再次加载时，真正实现了闭环控制，可以主动循环滚动画面。但是因为自变量的应用，在所有场景下你最多可以改变变量类型，从而大大提高了这种类型的复用性和扩展性。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zz/778101.html