html轮播图怎么实现自动轮播(html轮播图怎么做)

全球网 128 0

谢邀。

本文是用Axure 8.0实现轮播图的教程,接下来将结合实例进行分步骤讲解;该教程非常适用于Axure初学者;要想快速掌握Axure,最重要的一点就是要勤快练习,才能熟能生巧。

前期的部件准备在画布上使用占位图部件画个线框图;

banner位置的占位符转换为动态面板鼠,标右键,转换动态面板;

html轮播图怎么实现自动轮播(html轮播图怎么做)-第1张图片

给动态面板命名,选中在面板在右侧填写动态面板名称,这个命名不强制要求,只要你看得懂就行,在这我命名为banner。

双击动态面板弹窗动态面板状态管理页面,在这里我们要做了4张banner的轮播效果,添加四个面板状态并各自命名,点击其中一个面板状态右击可对该面板状态命名。

html轮播图怎么实现自动轮播(html轮播图怎么做)-第2张图片

点击面板状态,蓝色框内的部件将会在面板里显示,框外的不显示。

添加四个banner轮播图的状态按钮,在本文各命名矩形1、矩形2、矩形3、矩形4。

html轮播图怎么实现自动轮播(html轮播图怎么做)-第3张图片

开始动态效果的交互设置banner图的设置

①载入时设置,效果显示是页面载入时可自动进行轮播。

html轮播图怎么实现自动轮播(html轮播图怎么做)-第4张图片

html轮播图怎么实现自动轮播(html轮播图怎么做)-第5张图片

②鼠标单击时,效果显示是点击banner轮播图上的其中一个状态按钮显示相应的图。

html轮播图怎么实现自动轮播(html轮播图怎么做)-第6张图片

html轮播图怎么实现自动轮播(html轮播图怎么做)-第7张图片

③状态改变时,全局设置轮播图状态按钮的选中时的触发条件。

html轮播图怎么实现自动轮播(html轮播图怎么做)-第8张图片

分步说明

第一步:设置选中的状态值为“true”

html轮播图怎么实现自动轮播(html轮播图怎么做)-第9张图片

第二步:设置全局变量值

html轮播图怎么实现自动轮播(html轮播图怎么做)-第10张图片

第三步:触发事件的设置

html轮播图怎么实现自动轮播(html轮播图怎么做)-第11张图片

2. 动态面板状态的设置

对banner轮播图的四个状态矩形1、矩形2、矩形3、矩形4按钮进行设置,两种情况说明:在当前显示的状态进行向左向右触发状态按钮时的交互。

html轮播图怎么实现自动轮播(html轮播图怎么做)-第12张图片

if条件的分步说明

第一步:条件设置

html轮播图怎么实现自动轮播(html轮播图怎么做)-第13张图片

第二步:设置选中状态下的值

html轮播图怎么实现自动轮播(html轮播图怎么做)-第14张图片

第三步:设置动态面板的状态

html轮播图怎么实现自动轮播(html轮播图怎么做)-第15张图片

else if条件的分步说明

第一步:设置选中状态下的值。

html轮播图怎么实现自动轮播(html轮播图怎么做)-第16张图片

第二步:设置动态面板。

html轮播图怎么实现自动轮播(html轮播图怎么做)-第17张图片

注意:用例是一项一项执行,面板状态要和对应的banner状态一致,全部面板状态设置好就可以点击F5预览原型效果了。

抱歉,评论功能暂时关闭!