banner图片轮播图

第一步:从左侧元件库中拖入图片,并命名为(轮播图),右键点击选择最下面“转化为动态面板”再给动态面板添加三种状态,分别命名为(banner1、(banner2)、(banner3);确定


第二步:双击动态面板,进入动态面板(banner1)编辑页面;双击图片载入想要的图片调整大小与手机页面适应,如图;进入(banner2)、(banner3)时先分别从元件库中拖入图片,其次编辑页面也跟(banner1)编辑页面一样;


第三步:添加轮播小按钮;分别在三个轮播图里面添加小按钮,并分别填充颜色以示选中;如图所示


第四步:实现自动轮播;点击(轮播图)动态面板页面;右边添加事件编辑栏——属性——载入时——添加动作,如下图,选择 (设置面板状态)——勾选(轮播图)动态面板——选择状态(Next)——勾选(向后循环)——循环时间及进入动画可以自行设置,然后确定提交即可;


第五步:设置按钮控制效果,进入动态面板(banner1)编辑页面;

1.选中第一个按钮——在左侧添加动作中添加事件(等待)(banner1——设置等待时间为(1000)毫秒;


2.选中第二个按钮——在左侧添加动作中添加事件(设置面板状态)——配置动作中勾选(轮播图)动态面板——选择状态为对应的(banner2)——进入动画(向左滑动)时间为(3000)毫秒,退出动画(向左滑动)时间为(3000)毫秒,然后确定即可;

继续 添加事件(等待)——设置等待时间为(1000)毫秒;

继续 添加事件 (设置面板状态)——勾选(轮播图)动态面板——选择状态为(Next)————勾选(向后循环)——循环时间及进入动画可以自行设置,然后确定提交即可;


3.选中第三个按钮——在左侧添加动作中添加事件(设置面板状态)——配置动作中勾选(轮播图)动态面板——选择状态为对应的(banner3)——进入动画(向左滑动)时间为(3000)毫秒,退出动画(向左滑动)时间为(3000)毫秒,然后确定即可;

继续 添加事件(等待)——设置等待时间为(1000)毫秒;

继续 添加事件 (设置面板状态)——勾选(轮播图)动态面板——选择状态为(Next)————勾选(向后循环)——循环时间及进入动画可以自行设置,然后确定提交即可;


第五步:动态面板(banner2)、(banner3)里面的按钮效果时间设置和动态面板(banner1)一样;但是,对应的在第二个按钮和第三个按钮的“配置动作”设置中,选择状态分别为对应的(banner2)、(banner3);设置完预览即可,效果如图会自动轮播;

猜你喜欢

转载自blog.csdn.net/wrq9653/article/details/79782851