Axure知识点：如何制作轮播图效果（以泉州师范学院官网为例）

摘要：微信搜索【三桥君】 使用软件：Axure RP 9软件 说明：实现方式不唯一，这里给出三桥君制作的一种方式。

一、问题

本篇文章三桥君主要解决关于轮播图交互效果的设置，以泉师新闻轮播图为例。

在这里插入图片描述

该轮播图的效果主要有几个： 1.图片会自动轮流播放。 2.图片自动切换时，右上角的圆圈也会跟着对应切换，并变换颜色。 3.点击圆圈时，轮播的图片也会对应切换。 4.当打开这个页面时，第一个圆圈默认红色。 5.当鼠标移入图片区域时，会显示切换按钮；鼠标移出图片区域时，会隐藏切换按钮。 6.当点击切换按钮时，轮播图片会对应切换到上一张、下一张。

详细效果可以点击泉州师范学院官网首页进行体验。【泉师官网】

二、解决过程

先介绍下关于这次实验相关元件的命名，方便大家对教程内容的理解。

在这里插入图片描述

1.图片如何自动轮流播放？

选择动态面板

在这里插入图片描述

有几个轮播图就添加几个动态页面，然后把图片添加到对应的页面。

在这里插入图片描述

给该轮播图的整个动态面板轮播图小设置【载入时】交互效果，如图：

在这里插入图片描述

2.图片自动切换时，如何让右上角的圆圈也会跟着对应切换，并变换颜色？

首先添加四个白色圆圈

在这里插入图片描述

然后给每个圆圈添加选中的样式。

在这里插入图片描述

给该轮播图的整个动态面板设置【状态改变时】交互效果，如图：

在这里插入图片描述

在这里插入图片描述

3.点击圆圈时，如何让轮播的图片也会对应切换。

在每个圆圈中设置【单击时】的对应交互效果，如图：

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

4.当打开这个页面时，如何让第一个圆圈默认红色？

给第一个圆圈11设置【载入时】的交互效果，如图：

在这里插入图片描述

5.当鼠标移入图片区域时，如何显示切换按钮？鼠标移出图片区域时，如何隐藏切换按钮？

给方向左-轮播图小、方向右-轮播图小、轮播图小这三部分都设置相同的【鼠标移入时】和【鼠标移出时】的交互效果，如图：

在这里插入图片描述

在这里插入图片描述

6.当点击切换按钮时，如何让轮播图片会对应切换到上一张、下一张？

给右边的切换按钮添加【单击时】的交互效果，如图：

在这里插入图片描述

在这里插入图片描述

给左边的切换按钮添加【单击时】的交互效果，如图：

在这里插入图片描述

在这里插入图片描述

至此，泉师新闻轮播图的交互效果全都设置完成了。

文章整理不易，如有帮助请点赞关注支持，谢谢！微信搜索【三桥君】，回复【关注】有我准备的一份资源大礼包。后续持续更新~~~