实现PC端幻灯片、轮播

幻灯片

• 拖动矩形到页面中》选中矩形以及矩形包含的所有元件》转换为动态面板并命名为幻灯片》添加3个状态

• 进入到状态1设计小圆点的选中效果》设计小圆点的点击事件（鼠标单击时设置面板状态），添加鼠标悬停的样式、设置选中样式

• 将设计好的状态复制到状态2、3并修改选中圆点

• 设计页面载入事件》添加“等待”动作》添加“设置面板状态”动作，设置为状态2》添加等待》设置面板状态为3》等待》设置面板状态为1

轮播

• 在上述设计的基础上，清除圆点事件和页面载入事件，保留设计样式。首先给已经设置好选中样式的三个圆点设置“选项组名称”（三种状态保持相同的改变），让圆点只有一个能够被选中

  
  

• 设置圆点名称对应为圆点1、圆点2、圆点3“选中时”事件，添加“设置面板状态”动作 》 选择状态为“Value” 》 状态名称或序号进入fx设置为[[This.name.slice(-1)]]，即序号为当前状态名称最后一个字符（比如圆点1则取到对应序号1），以达到选择当前状态的效果 》 再添加等待动作，以便进入下一个状态

• 在上述基础上还要设置圆点的选中效果，因为是通过选中实现状态切换，所以设置选中的圆点为第二个，给第二个圆点添加“选中”动作（.同上，设置剩余两个圆点心的“选中时”事件，对于第二个圆点则选中第三个圆点，第三个圆点则选中第一个圆点）

6.png

• 对应状态2、状态3也需要与状态一保持一致的设置（建议直接复制状态一，完成动作添加，再修改状态样式）。设置完成之后，给页面设置“载入时”事件，添加“选中”动作选中状态1下的第一个圆点

总结：轮播实现其实就是当页面载入设置圆点1选中》圆点1的选中事件确定面板状态，同时设置选中下一个圆点》循环上述效果