图片轮播是各大网站常常见到的形式，文章带我们学习了如何用Axure实现图片轮播功能，一起来看看~

双11刚过没多久，大家是否都参加了2000+亿的大项目呀？剁手的时候，有没有被各大电商平台的首页图片轮播吸引住了呢？是不是原本不想剁手，结果只因一个对眼就无法自拔了呢？

图片轮播是各大电商平台常见的套路，轮播中的每个图片都相当有吸引力的呀。下面呢，我们就来说说首页图片轮播用Axure怎么实现？

还是跟以往的套路一样，下面从3个方面来展开。

01 需求分析

我们本次的需求是图片轮播，什么是图片轮播呢？简单来说，就是一套图片以一定时间间隔自动循环播放，同时用户也可以选择图片实现点播的效果。

其实再深入一点，我们会发现一张图片的显示与否也是有条件的。从这个角度来看，我们会想到Axure中的动态面板。

没错，今天的主角还是它。

02 Axure关键点分析

这个案例的关键点主要有3个：

1)动态面板的不同状态及对应的图片设置，这个相对比较容易

2)设置小圆点，实现点击小圆点跳转至对应的图片

所有小圆点需要设置为只能单个选中，这个通过设置选项组名称实现

设置点击小圆点的交互，如点击第一个小圆点则显示第一张图片，以此类推。

3)设置动态面板的交互效果

交互时间点为状态改变时，“向后循环”需要勾选上，还可以根据实际设置间隔时间以及图片切换的方向等

03 效果展示

我们来看一下最终效果吧，网址为：https://wxnac1.axshare.com/

本文由 @翠baby 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议

axure 图片切换图片的交互_Axure教程：首页图片轮播相关推荐

Vuetify Carouse轮播图图片切换导致页面总是自动跳转到轮播图位置
文章目录 begin !!! Solution1 Solution2 end begin vuetify carouse轮播图的图片自动切换的时候, 会自动聚焦跳转到轮播图自身的位置. 这导致了一个 ...
苹果CMSv8/v10首页幻灯轮播图片设置教程
看这个教程前请确保你的模板支持幻灯片,如果没有欢迎选购本站带幻灯的优质模板. 1,首先在-后台>视频>视频数据中找一部需要推荐显示的影片,然后点击右边的编辑就可以看到和下图一样的界面了 2 ...
Axure 点图片外区域即隐藏_AXURE教程：用中继器做一个手机版内容分享原型
本文仔细介绍了中继器制作手机版内容分享原型的步骤与注意要点,希望对你有所启发. hello,今天教大家如何用中继器做一个类似微博的内容分享原型,里面的内容从0-9张图片的格式都设置好了,我们只需要填写 ...
dw html5中怎么设置图片自动切换,DW制作九宫格全屏亮灯轮播图片且自动切换图片教程...
本文介绍的是利用DW制作九宫格全屏亮灯轮播图片并且可以自动切换图片,而且点击图片时还会亮灯,推荐过来,大家一起来学习吧! 软件名称:Adobe Dreamweaver CS3 官方中文安装版软件大小: ...
在html中三个图片切换,轻松搞定网页中的图片切换
生活中经常看到,像新浪等很多门户网站的首页都有滚动图片的展示,如下图所示: 某网站首页滚动切换图片这样不但可以减少文字的单一.乏味,而且可以直观内容,更好的吸引用户.那在我们做软件系统时,是否也可以 ...
html圆形图片切换,jQuery和CSS3炫酷圆形图片切换特效
这是一款效果非常酷的jQuery和CSS3圆形图片切换特效.该圆形图片特效可以使用animate.css来制作图片的进入动画和离开动画.可以任意设置多张图片进行来回翻转.旋转切换,效果堪称一流. 使用 ...
html5鼠标经过图片切换,JS实现鼠标移入移出控制图片的切换效果
在看专业英语的时候,学习JS的Timer Event.正好有一个例子,实现的是,图片自动切换,当鼠标点击图片的时候,停止切换.于是想要动手实践一下,并且添加上自己的想法.于是就有了下面的图片和代码. ...
MFC处理背景图片切换时，背景上的按钮图片不变化
近期项目中需要在一个MFC对话框中轮播显示图片,效果如下: 一共5张背景图,图上有5个小圆点轮流播放显示,并且小圆点加亮,右上角是关闭按钮,鼠标放上去按钮变红色. 最开始的方案是在dlg上添加一个pi ...
android 按钮图片切换动画效果,Button按钮点击图片切换效果
Button按钮图片切换效果设置. 通常在工程中用到图片按钮点击事件,大多都用ImageButton.在这里我们用 Button的点击事件,在图片的切换过程中不再通过setBackgroundReso ...

axure 图片切换图片的交互_Axure教程：首页图片轮播

01 需求分析

02 Axure关键点分析

03 效果展示

axure 图片切换图片的交互_Axure教程：首页图片轮播相关推荐

最新文章

热门文章