支付宝官网的首页有三张背景图轮流呈现。

页面上的图标、按钮等元素,不在教程中再做讲述。
我们这里主要实现图片的自动切换。
在页面中,三张图片轮流切换,并且切换时带有渐变效果。
这样的交互,我们需要借助动态面板来实现。
并且,有一点需要注意,页面中的图片是铺满全屏的,并且改变浏览器窗口大小时,图片始终居中显示。

在画布中放入一个动态面板,并命名。
动态面板的尺寸与图片素材的尺寸保持一致,宽度1600像素,高度820像素。
然后,我们在概要面板中为动态面板添加两个新状态。

图片的尺寸需要自适应浏览器窗口,这就不能直接在动态面板的状态中添加图片,而是要把图片作为动态面板状态的背景图片。
我们在概要面板中点中动态面板的第一个状态,在样式面板中为状态设置背景图片。

再点中动态面板的第二个状态,为第二个状态设置背景图片。

当然,第三个状态也要同样设置。

此时,动态面板已经添加好了三张背景图片,我们需要通过交互让三张图片轮流播放。
页面打开之后,图片就开始自动循环播放,所以要添加的交互是动态面板的[载入时]事件。
在动态面板[载入时],为[当前]面板[设置面板状态]为[下一项],并且启用[向后循环],也就是切换到最后一个状态后,还能重回第一个状态。进入与退出动画都是[逐渐]效果。循环的间隔[4000]毫秒,并且[首个状态延迟4000毫秒后切换],以免页面打开后第一张图片一闪而过。

完成交互事件的添加之后,还有最后一步。
在样式面板中,将动态面板设置为浏览器的[100%宽度]
并且,自身宽度设置为很小的尺寸。
因为宽度太大的话,在浏览器窗口宽度小于动态面板宽度时会出现水平方向的滚动条。

到这里,我们就完成了图片的自动切换,并且能够水平方向铺面全屏。
不习惯看文字教程?还有《Axure RP 9萌新修炼视频》奉上!
转载请注明:iaxure.com » 动态面板的应用(3)