摘要:微信搜索【三桥君
使用软件:Axure RP 9软件

一、问题

本篇文章三桥君主要解决关于轮播图交互效果的设置,以泉师新闻轮播图为例。
Axure知识点:如何制作轮播图效果的详细教程
该轮播图的效果主要有几个:
1.图片会自动轮流播放。
2.图片自动切换时,右上角的圆圈也会跟着对应切换,并变换颜色。
3.点击圆圈时,轮播的图片也会对应切换。
4.当打开这个页面时,第一个圆圈默认红色。
5.当鼠标移入图片区域时,会显示切换按钮;鼠标移出图片区域时,会隐藏切换按钮。
6.当点击切换按钮时,轮播图片会对应切换到上一张、下一张。

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

二、解决过程

先介绍下关于这次实验相关元件的命名,方便大家对教程内容的理解。
Axure知识点:如何制作轮播图效果的详细教程

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

选择动态面板
Axure知识点:如何制作轮播图效果的详细教程
有几个轮播图就添加几个动态页面,然后把图片添加到对应的页面。
Axure知识点:如何制作轮播图效果的详细教程
给该轮播图的整个动态面板轮播图小设置【载入时】交互效果,如图:
Axure知识点:如何制作轮播图效果的详细教程

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

首先添加四个白色圆圈
Axure知识点:如何制作轮播图效果的详细教程
然后给每个圆圈添加选中的样式。
Axure知识点:如何制作轮播图效果的详细教程
给该轮播图的整个动态面板设置【状态改变时】交互效果,如图:
Axure知识点:如何制作轮播图效果的详细教程
Axure知识点:如何制作轮播图效果的详细教程

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

在每个圆圈中设置【单击时】的对应交互效果,如图:
Axure知识点:如何制作轮播图效果的详细教程
Axure知识点:如何制作轮播图效果的详细教程
Axure知识点:如何制作轮播图效果的详细教程
Axure知识点:如何制作轮播图效果的详细教程

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

给第一个圆圈11设置【载入时】的交互效果,如图:
Axure知识点:如何制作轮播图效果的详细教程

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

给方向左-轮播图小、方向右-轮播图小、轮播图小这三部分都设置相同的【鼠标移入时】和【鼠标移出时】的交互效果,如图:
Axure知识点:如何制作轮播图效果的详细教程

Axure知识点:如何制作轮播图效果的详细教程

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

给右边的切换按钮添加【单击时】的交互效果,如图:
Axure知识点:如何制作轮播图效果的详细教程

Axure知识点:如何制作轮播图效果的详细教程
给左边的切换按钮添加【单击时】的交互效果,如图:
Axure知识点:如何制作轮播图效果的详细教程
Axure知识点:如何制作轮播图效果的详细教程

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


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

相关文章:

  • 2021-07-28
  • 2021-12-02
  • 2021-12-01
  • 2021-08-19
  • 2021-07-18
  • 2021-07-11
  • 2021-11-07
  • 2021-10-25
猜你喜欢
  • 2021-12-17
  • 2021-04-12
  • 2021-08-29
  • 2021-11-22
  • 2021-08-12
  • 2021-11-13
  • 2021-07-09
相关资源
相似解决方案