支付宝官网的首页有三张背景图轮流呈现。
页面上的图标、按钮等元素，不在教程中再做讲述。
我们这里主要实现图片的自动切换。
在页面中，三张图片轮流切换，并且切换时带有渐变效果。
这样的交互，我们需要借助动态面板来实现。
并且，有一点需要注意，页面中的图片是铺满全屏的，并且改变浏览器窗口大小时，图片始终居中显示。
在画布中放入一个动态面板，并命名。
动态面板的尺寸与图片素材的尺寸保持一致，宽度1600像素，高度820像素。
然后，我们在概要面板中为动态面板添加两个新状态。
图片的尺寸需要自适应浏览器窗口，这就不能直接在动态面板的状态中添加图片，而是要把图片作为动态面板状态的背景图片。
我们在概要面板中点中动态面板的第一个状态，在样式面板中为状态设置背景图片。
再点中动态面板的第二个状态，为第二个状态设置背景图片。
当然，第三个状态也要同样设置。
此时，动态面板已经添加好了三张背景图片，我们需要通过交互让三张图片轮流播放。
页面打开之后，图片就开始自动循环播放，所以要添加的交互是动态面板的[载入时]事件。
在动态面板[载入时]，为[当前]面板[设置面板状态]为[下一项]，并且启用[向后循环]，也就是切换到最后一个状态后，还能重回第一个状态。进入与退出动画都是[逐渐]效果。循环的间隔[4000]毫秒，并且[首个状态延迟4000毫秒后切换]，以免页面打开后第一张图片一闪而过。
完成交互事件的添加之后，还有最后一步。
在样式面板中，将动态面板设置为浏览器的[100%宽度]
并且，自身宽度设置为很小的尺寸。
因为宽度太大的话，在浏览器窗口宽度小于动态面板宽度时会出现水平方向的滚动条。
到这里，我们就完成了图片的自动切换，并且能够水平方向铺面全屏。
不习惯看文字教程？还有《Axure RP 9萌新修炼视频》奉上！
转载请注明：iaxure.com » 动态面板的应用（3）