京东首页海报轮播及手动切换

Axure学习从点滴开始！

下面是海报轮播的简单实现方法，希望读该文章的你在产品路上又进步了一点。

拖动一张图片到index中，并鼠标右键单击选择“转化为动态面板”。

2.双击动态面板，添加2个state，共3个state。（这里只是以3个举例）。

将每个state里面添加一张图片。

3.回到index，点击动态面板，在右上角属性中选择“载入时”事件，并双击添加。

选择弹出窗左侧的“设置动态面板”，点击设置参数。

4.在index界面，在元件库里找到椭圆元件，将椭圆边框去掉，并设置合适的大小放在图片上，并复制三个一模一样的椭圆，分别编号为1，2，3。

5.对椭圆进行设置交互样式，选中第一个椭圆，右键单击椭圆，选择“交互样式”中的“选中”下面的“填充颜色”。其它椭圆也一样操作。

6.回到index，点击动态面板，选择属性中的“状态改变时”，并双击，弹出弹窗，点击添加条件。

选择弹窗左侧“设置选中”，按照序号依次设置椭圆1，椭圆2，椭圆3的值是TRUEorFALSE。

双击“状态改变时”添加第二个case，状态为state2时。

选择弹窗左侧“设置选中”，选择FALSEorTRUE。第三个椭圆同理。

7.点击预约即可，如下图。

8.设置鼠标移入事件，在index中，点击动态面板，选择属性上的“鼠标移入时”事件。

双击“鼠标移入时”，弹出弹窗，并选择设为“停止循环”。

再选择属性中的“鼠标移出时”事件，并双击，选择“next”。

9.回到index，单击第一个椭圆，在右侧属性中选择“鼠标移入时”，双击，选择“设置动态面板”，并选择“state1”。其它椭圆类推。

最后，预览即可。

喜欢就经常来关注，文章会不定期更新~