航洋学校

详细内容

广告图片自动轮播+点击切换

  广告图轮播在日常的原型设计中是最常见的了,今天和大家分享如何制作自动轮播+手工点击切换,底部有已制作好的原型文件下载,废话不多说,咋们现在就动手实现。

4.png

  首先看一下我们最终想要的效果

  一、制作自动轮播

  1、选中图片右键转换为动态面板,同时在动态面板中添加第二张和第三张广告图。

  2、点击页面空白处,设置页面载入时事件,选择 设置动态面板 效果,选择banner图片动态面板,把状态设置为 Next , 勾选 向后循环 和 循环间隔 ,同时设置好进入动画和退出动画向左滑动。如下图

  3、重复以上两步操作把焦点图完成,其中注意两点,一是进入动画和退出动画设置为 逐渐,二是每一帧设置好对应的焦点样式。

  到这里可以预览一下效果,会发现简单两步,我们就实现了广告图轮播了,嘻嘻。

  接下来我们进入第二大步,增加点击切换功能

  二、增加点击切换

  给每一帧的焦点样式增加鼠标单机时事件,点击时触发2个事件:

  (1)设置切换面板状态,需同时设置好 焦点样式 和 banner图片 对应的面板状态。

  例如选择*帧的元素,则设置 焦点样式 和 banner图片 的面板状态切换到*帧和*张,

  以此类推,把第二帧和第三帧设置好。

  (2)设置单击后自动轮播,需同时设置好 焦点样式 和 banner图片 对应的面板状态自动轮。

  方法和*步基本雷同,例如选择*帧的元素,则设置 焦点样式 和 banner图片 的面板状

  态设置为Next,向后循环,设置项如下图:

  用此方法重复把每一帧的焦点样式制作好,我们的banner图自动轮播+点击切换轮播,就完成了,是不是很简单。

  贵阳航洋动漫职业学校是贵阳市教育局批准(贵阳市教[2010]15号)设立的跨专业(包含计算机平面设计、动漫与游戏制作、影像与影视技术、绘画等专业)、多门类、全日制中等专业职业学校,同时也是一所实行准军事化管理的学校。


关注公众号

关注微头条

学校位于贵阳市白云区数字内容产业园内,占地面积60多亩,篮球场、室内运动场、游泳池、食堂、超市等俱全,环境优雅。

电话直呼
在线客服
发送邮件
企业位置
联系我们:
13618598927
校长办公室
点击这里给我发消息
还可输入字符250(限制字符250)
seo seo