axure 图片切换图片的交互_Axure教程：在动态面板里面设置图片自动/手动切换

原标题：Axure教程：在动态面板里面设置图片自动/手动切换

本文作者分享自己做过的一个PC端的高保真原型，来教大家，如何在动态面板里面设置图片的自动和手动的切换。

给大家分享自己做过的一个案例，来自于去年自己做的一个PC端高保真原型。

案例描述

固定区域循环一组图片(幻灯片效果)，条形分页标签随着播放不同的图片，而对应改变样式。

元件准备

从元件库中拖出一个动态面板，我们给它命名为 Banner ，里面同样添加1+N个状态，每个状态里放同样大小的图片(记得位置要统一)。

同样的条形标签我们按照上面的做一下，第一个状态的第一个为选中，往下递增下去。( 这方法可能有点蠢，但设置交互属性的时候比较方便，其中也包含了个人习惯 )。

这样大致就做好了，接下我们开始下一步。

思路分析

利用动态面板可添加多个状态的特性，我创建了 6 个状态；

将 6 张图需要展示的图片放到各个状态里面；

将条形标签做成只能唯一被选中的效果( 第一个状态的第一个为选中 )，其他状态递增下去；

页面打开后，开启图片( 载入时 )自动循环播放的效果，且每次切换新的图片时，同时切换不同的条形标签状态。

思路基本完善后，下面我们来做一下这个效果。

Banner 动态面板设置为之后，条形标签同样设置。这时候我们就能实现出图片自动切换的效果了，接下来我们可以继续优化交互体验 ~

我们给Banner的两侧各加一个可点击的按钮，点击左侧按钮( 向前一个状态 )，点击右侧按钮( 向后一个状态 )。

最后我们加一个鼠标移入移出的交互效果，如图：

完成(已做完的小伙伴给自己鼓个掌)。

总结

实现图片 or 条形标签自动切换；

实现鼠标移入时停止自动切换，移出即可回复自动切换；

实现点击两侧按钮可手动切换。

今天的分享到此结束了，有任何意见和建议请在下方留言，我会尽快回复您，谢谢！！

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

责任编辑：

axure 图片切换图片的交互_Axure教程：在动态面板里面设置图片自动/手动切换相关推荐

自动切换输入法 mac版能让你在不同的应用之间自动的切换输入法
自动切换输入法专业版for mac一款切换输入法辅助工具.自动切换输入法 mac版能让你在不同的应用之间自动的切换输入法,以及中英文.让你的文字输入行云流水,从此告别繁琐的手动切换输入法,大幅提高输入 ...
axure内联框架和动态面板_解读Axure RP 9新功能：内联编辑动态面板
一直以来,动态面板小部件是Axure RP的一个定义功能.在版本4中引入的动态面板是容器,允许用户构建从图像轮播到粘性导航标题到可拖动页面元素的所有内容. Axure RP 9的主要目标之一是使这些功 ...
speedoffice（PPT）怎么设置幻灯片自动播放切换时间
PPT怎么设置幻灯片自动播放切换时间呢?看看小编是怎么操作的吧首先,用speedoffice打开需要设置幻灯片自动播放切换时间的PPT文件然后,点击右侧工具栏"幻灯片",将幻灯 ...
axure 图片切换图片的交互_Axure教程：首页图片轮播
图片轮播是各大网站常常见到的形式,文章带我们学习了如何用Axure实现图片轮播功能,一起来看看~ 双11刚过没多久,大家是否都参加了2000+亿的大项目呀?剁手的时候,有没有被各大电商平台的首页图片轮 ...
axure变成一个小手了_Axure教程：这几个小技巧你一定要知道
编辑导读:Axure是产品经理在工作中最常用到的软件之一,尽管它的使用范围非常广泛,但是有一些小技巧很多人并不知道.本文作者总结了Axure在使用中的一些小技巧,与你分享. 一.Axure制作页面,当 ...
axure中图表背影_Axure 教程：动态图表——排名图
之前的文章Axure教程:可视化视图和大家分享了怎样用中继器来制作图表.后来有粉丝问我可不可以用中继器做成动态的图表.所以现在作者就教大家怎么用axure来制作动态图表,今天先来制作排名图. 这个原型 ...
设计点击左侧切换页面进出_Axure教程：（初级）导航中的页面切换
本文给大家讲讲如何利用Axure进行导航中的页面切换,一起来看看~ 一.页面布局 (1)从左侧元件库拉入两个矩形作为导航按钮,分别命名为:页面1.页面2. (2)从左侧元件库拉入一个动态面板作为页面内 ...
html圆形图片怎么加白边框,SwiftUI圆形图片制作示例_如何设置图片为圆形并加边框阴影效果...
这个教程将使用SwiftUI制作一个圆形图片,并给图片设置边框与阴影效果,我们以前的swift使用的是UIImageView这个对象来加载图片,这是UIkit里面的类,而今天的SwiftUI加载图片, ...
Axure8.0教程：动态面板多级联动
动态面板在Axure原型设计中,可以说是应用最广泛的了.本次课程我们学习用动态面板制作多级联动效果. 原型预览及下载地址:https://8ewqz4.axshare.com/#g=1 一.制作交互效 ...

axure 图片切换图片的交互_Axure教程：在动态面板里面设置图片自动/手动切换

axure 图片切换图片的交互_Axure教程：在动态面板里面设置图片自动/手动切换相关推荐

最新文章

热门文章