安卓图像自动循环播放：广告展示优化方案

在各大电商网站的首页&＃xff0c;都能看到自动轮播的广告&＃xff0c;每隔数秒&＃xff0c;就会自动切换其中的广告&＃xff1b;今天我们就来制作一个广告轮播功能&＃xff1b;需完成效果&＃xff1a;

1&＃xff0c;广告内容自动轮播

2&＃xff0c;左右切换展示广告

3&＃xff0c;手动选择指定广告

主要功能点&＃xff1a;动态面板

一 准备工作

1&＃xff0c;新建4个页面&＃xff0c;作为点击广告后的跳转链接页面&＃xff1b;(只作为一个跳转的地址)2&＃xff0c;准备4张图片&＃xff0c;用作首页的广告轮播素材

二 自动轮播

需实现效果&＃xff1a;在网页的固定位置&＃xff0c;每隔固定时间&＃xff0c;自动切换当前位置显示的图片&＃xff1b;操作步骤&＃xff1a;1&＃xff0c;在index页面中拉入一个“动态面板”原件&＃xff0c;命名为“ad”&＃xff1b;对“ad”新增3个面板状态&＃xff0c;并将4个面板状态依次命名为“ad1”“ad2”“ad3”“ad4”&＃xff1b;

2&＃xff0c;剪切一张我们事先准备好的图片&＃xff0c;双击动态面板“ad”的状态1“ad1”&＃xff0c;打开“ad1”的页面&＃xff1b;复制图片&＃xff1b;我们会发现&＃xff0c;复制的图片与我们的动态面板大小不匹配&＃xff0c;导致在动态面板中&＃xff0c;只能显示一部分的图片&＃xff1b;我们只需要选中动态面板“ad”&＃xff0c;在属性中勾选“自动调整为内容尺寸”就可以解决这个问题&＃xff1b;

 

3&＃xff0c;重复第二步动作&＃xff0c;我们将其他三个面板状态(ad2&＃xff0c;ad3&＃xff0c;ad4)依次放入事先准备好的图片&＃xff1b;4&＃xff0c;设置自动轮换&＃xff0c;点击页面空白处(或按Esc键)&＃xff0c;以显示页面属性&＃xff1b;双击属性中的“页面载入时”&＃xff0c;打开页面载入时的交互设置界面&＃xff1b;

5&＃xff0c;选择“设置面板状态”&＃xff0c;在右侧选中动态面板“ad”&＃xff1b;选择状态中选择“next”&＃xff0c;以实现自动切换下一个面板状态&＃xff1b;勾选“向后循环”&＃xff0c;可以实现循环动作&＃xff1b;勾选“循环间隔”&＃xff0c;并将轮播时间修改为“3000ms”。即每隔2秒&＃xff0c;会自动切换为后一个广告&＃xff1b;

三 手动切换左右状态

需实现效果&＃xff1a;鼠标移入广告图片区域时&＃xff0c;停止自动轮播&＃xff0c;停在当前的广告图片上&＃xff1b;同时在左右两侧显示按钮&＃xff0c;点击左侧按钮&＃xff0c;可以手动切换上一个广告图片&＃xff0c;点击右侧按钮&＃xff0c;可以手动切换下一个广告图片&＃xff1b;鼠标移出广告区域&＃xff0c;恢复自动轮播效果&＃xff1b;操作步骤&＃xff1a;1&＃xff0c;在动态面板“ad”上&＃xff0c;放置两个图片&＃xff0c;分别命名为“left”“right”&＃xff0c;用以控制广告切换的操作&＃xff1b;

2&＃xff0c;设置图片“left”“right”默认为“隐藏状态&＃xff1b;

3&＃xff0c;需要实现&＃xff0c;点击“left”图片时&＃xff0c;广告切换为上一个广告&＃xff1a;选中“left”&＃xff0c;双击添加事件“鼠标单击时”&＃xff1b;

 

4&＃xff0c;添加“设置面板状态”&＃xff0c;选择“ad”&＃xff0c;设置状态为“previous”&＃xff0c;勾选“向前循环”&＃xff1b;点击确认&＃xff0c;完成&＃xff1b;

5&＃xff0c;类似的操作在“right”上再作一遍&＃xff0c;状态设置为“next”&＃xff0c;并勾选“向后循环”&＃xff1b;

 

6&＃xff0c;要实现鼠标移入广告区域时&＃xff0c;暂停自动轮播&＃xff0c;同时将隐藏的两个控制按钮“left”“right”显示出来&＃xff1b;选中动态面板“ad”&＃xff0c;选择事件“鼠标移入时”(默认的交互事件中没有&＃xff0c;需要点击“更多事件”

7&＃xff0c;添加“设置面板状态”&＃xff0c;选择“ad”&＃xff0c;将状态设置为“停止循环”

8&＃xff0c;添加“显示”&＃xff0c;选择“left”“right”&＃xff0c;设置为“显示”

9&＃xff0c;要实现鼠标移出广告区域时&＃xff0c;恢复自动轮播&＃xff0c;同时隐藏的两个控制按钮“left”“right”&＃xff1b;高能预警&＃xff0c;此处有坑&＃xff0c;按常规做法&＃xff0c;我们会按下面步骤操作&＃xff1a;选中动态面板“ad”&＃xff0c;选择事件“鼠标移出时”(默认的交互事件中没有&＃xff0c;需要点击“更多事件”添加“设置面板状态”&＃xff0c;选中“ad”&＃xff0c;重新设置自动轮播的效果&＃xff0c;即将状态设为“next”&＃xff0c;勾选“向后循环”&＃xff0c;勾选循环间隔&＃xff0c;时间设为“3000ms”&＃xff1b;添加“隐藏”&＃xff0c;选中“left”“right”&＃xff0c;勾选“隐藏”&＃xff1b;

看似效果已经实现&＃xff0c;而实际预览的时候&＃xff0c;却发现鼠标移入的时候&＃xff0c;两个小图片正常显示了&＃xff0c;广告也不自动切换了&＃xff0c;可是当我们点击“left”或“right”的时候&＃xff0c;广告页却没按设想的一样切换为新的广告图片&＃xff1b;10&＃xff0c;细心的朋友可能发现了&＃xff0c;当我们点上“left”或“right”的时候&＃xff0c;小图标居然是看不见的&＃xff1b;没错&＃xff0c;其实根本原因正是出在了这边&＃xff1b;当我们移入鼠标时&＃xff0c;“left”显示&＃xff0c;可是当你想要去点击“left”的时候&＃xff0c;势必会将鼠标移入“left”&＃xff0c;由于“left”在动态面板“ad”的上方&＃xff0c;覆盖了“ad”&＃xff0c;移上“left”的时候&＃xff0c;就是移出“ad”的时候&＃xff0c;即触发了之前的“移出鼠标时”的交互&＃xff0c;将“left”变为了隐藏&＃xff1b;然后程序进入了死循环&＃xff1b;要解决这个问题&＃xff0c;我们只需要在“鼠标移出时”的交互中增加一个小小的条件即可&＃xff1b;如上所说&＃xff0c;既然移上“left”或者“right”或陷入死循环&＃xff0c;那么我们在执行“鼠标移出时”的操作时&＃xff0c;排除掉这个情况就可以了&＃xff1b;对“鼠标移出时”的交互添加条件&＃xff0c;对指针位置进行判断&＃xff0c;当指针同时满足“未接触”“left”和“未接触”“right”时&＃xff0c;执行移出交互&＃xff0c;即可实现我们的目的&＃xff1b;

四 手动切换任意状态

需实现效果&＃xff1a;鼠标移入广告图片区域时&＃xff0c;停止自动轮播&＃xff0c;停在当前的广告图片上&＃xff1b;在下方显示控制按钮&＃xff0c;点击对应图标&＃xff0c;可以直接切换显示对应的广告图片&＃xff1b;鼠标移出广告区域&＃xff0c;恢复自动轮播效果操作步骤&＃xff1a;1&＃xff0c;放置一个图标&＃xff0c;作为广告1的控制按钮&＃xff0c;命名为ad1&＃xff1b;

 

2&＃xff0c;设置“ad1”的“选中”状态&＃xff0c;单击“选中”&＃xff0c;然后选择“填充颜色”&＃xff0c;这里我们就选择蓝色&＃xff1b;这样我们的“ad1”就有了2个状态&＃xff0c;灰色的非选中状态&＃xff0c;蓝色的选中状态&＃xff1b;后面我们会将其与广告页的显示图片进行对应&＃xff0c;当广告显示广告1的时候&＃xff0c;我们的图片“ad1”显示蓝色&＃xff0c;如果不是广告1&＃xff0c;则显示灰色&＃xff1b;点击确认&＃xff1b;

  

3&＃xff0c;给图片ad1设置交互&＃xff0c;当我们点击“ad1”的时候&＃xff0c;需要广告也对应显示第一个图片&＃xff1b;双击“ad1”属性的“鼠标单击时”&＃xff0c;添加“设置面板状态”&＃xff0c;将“ad”的状态选择为“ad1”&＃xff0c;点击确认&＃xff1b;

 

4&＃xff0c;复制3个图片“ad1”&＃xff0c;分别命名为“ad2”“ad3”“ad4”&＃xff0c;重复上述的2/3两步&＃xff0c;分别对应各自的动态面板的状态&＃xff1b;

5&＃xff0c;需要将动态面板的4个状态和4个图片空间的选中的状态分别对应&＃xff1b;当显示第一个广告的时候&＃xff0c;图片“ad1”为选中状态&＃xff0c;其他为未选中&＃xff1b;当显示第二个广告的时候&＃xff0c;图片“ad2”为选中状态&＃xff0c;其他为未选中&＃xff1b;选中动态面板“ad”&＃xff0c;添加交换“改变状态时”

6&＃xff0c;“添加条件”当动态面板状态为“ad1”时&＃xff0c;点确认

7&＃xff0c;选择“选中”&＃xff0c;设置“ad1”状态为“true”

8&＃xff0c;选择“取消选中”&＃xff0c;设置“ad2”“ad3”“ad4”状态为“false”&＃xff1b;点击确认&＃xff0c;我们就完成了第一个广告的对应交互&＃xff1b;

9&＃xff0c;重复步骤5-8&＃xff0c;分别设置第二/第三/第四个广告的页面交互&＃xff1b;

10&＃xff0c;此时我们点击预览&＃xff0c;广告页下方的图片状态已各自对应&＃xff0c;不过还有一个小瑕疵&＃xff0c;这个效果都是在动态面板状态改变的时候才起作用&＃xff1b;我们刚进页面的时候&＃xff0c;没有触发动态面板改变状态的交互&＃xff0c;4个小图片都是非选中状态&＃xff1b;这边我们只需要将图片“ad1”的默认状态设为“选中”即可&＃xff1b;最后将4个小图片放置在广告页下方&＃xff0c;完整版的广告轮播功能就大功告成了。

原型下载链接&＃xff1a;https://pan.baidu.com/s/1JtejTgScRbXTWY_36nVfOQ

提取码&＃xff1a;xz0v