首页 > 代码库 > 使用Axure制作无限循环展示图片效果

使用Axure制作无限循环展示图片效果

一、实现的效果

如图:

image

1、此次需要实现的效果是,进入界面后,在图片展示区域的图片根据事先设定好的时间,自动切换不同的图片;

2、循环不间断;

3、页面不出现闪烁的现象。

 

二、做前工作

图片:4张

软件:Axure

 

三、制作流程

1、在开打的空页面上添加一个动态面板(X:20 ,Y:20 ;W:600,H:382)如图:

image

image

 

2、给动态面板取名为“动态广告”,再在该动态面板上添加4个字状态,分别取名为,图01、图02、图03、图04。如图:

 

image

 

3、为每个状态分别添加不同的图片。如图:

 

imageimage

imageimage

 

4、为了实现这个无限循环的效果,需要在主界面再添加一个隐藏的辅助动态面板,建议,将做辅助用的动态模板添加到展示图片的动态面板上,这样就不用占用页面的其他位置了。

动态面板命名为“图片循环辅助面板”

如图:

image

image

image

 

5、给主页面添加“页面载入时”事件,设置界面加载时“图片循环辅助面板”的相对距离为:(1,0),如图:

image

image

 

6、设置“图片循环辅助面板”的“移动”事件

image

image

 

image

image

image

 

7、制作完成,点击“发布-生成HTML文件”,运行一下测试效果。

image

 

运行效果OK!大功告成!

使用Axure制作无限循环展示图片效果