一、交互效果说明
1、左右箭头切换
幻灯3秒自动切换,并且支持左右箭头点击切换
![](https://img.haomeiwen.com/i22688770/1818cc703895c41e.png)
2、焦点切换
幻灯3秒自动切换,同时焦点随着幻灯一起切换;点击焦点,幻灯也会随着焦点切换
![](https://img.haomeiwen.com/i22688770/2112d9fabd85ffeb.png)
下载及预览地址:预览及下载地址
1、左右箭头切换
创建一个动态面板,命名为【幻灯图片】,双击动态面板,添加并设置三张图片
![](https://img.haomeiwen.com/i22688770/6705769c11f4f767.png)
制作左右箭头并放置在动态面板【幻灯图片】左右两边
![](https://img.haomeiwen.com/i22688770/827154e3fe8980d8.png)
接下来添加交互,选择动态面板【幻灯图片】,触发载入时事件
![](https://img.haomeiwen.com/i22688770/0dc3541c31fb43a7.png)
选择左边箭头触发鼠标单击事件
![](https://img.haomeiwen.com/i22688770/3de0644cef2ebb2f.png)
选择右边箭头触发鼠标单击事件
![](https://img.haomeiwen.com/i22688770/2e39e83db18dbbf8.png)
2、焦点切换
创建一个动态面板,命名为【焦点切换】,双击动态面板添加并设置三张图片
![](https://img.haomeiwen.com/i22688770/d92f2d079bcb5838.png)
创建一个新的动态面板,命名为【焦点】,并添加设置三个焦点
![](https://img.haomeiwen.com/i22688770/24bcf5992178d736.png)
并分别设置三个焦点的颜色,
焦点一
![](https://img.haomeiwen.com/i22688770/903dc209e2d1be71.png)
焦点二
![](https://img.haomeiwen.com/i22688770/6bf0310e69a33ed2.png)
焦点三
![](https://img.haomeiwen.com/i22688770/e0382332825800a8.png)
接下来添加交互
选择动态面板【焦点切换】触发载入时事件
![](https://img.haomeiwen.com/i22688770/88de38e23cbd4e10.png)
选择动态面板【焦点】,双击焦点一进入
![](https://img.haomeiwen.com/i22688770/23705dceca9f335e.png)
选择第二个焦点矩形图,触发鼠标单击事件
![](https://img.haomeiwen.com/i22688770/6a051867663df705.png)
选择第三个焦点矩形,触发鼠标单击事件
![](https://img.haomeiwen.com/i22688770/05992a4412d134ec.png)
选择动态面板【焦点】,双击焦点二进入
![](https://img.haomeiwen.com/i22688770/695c5f2758de3ec4.png)
选择第一个焦点矩形图,触发鼠标单击事件
![](https://img.haomeiwen.com/i22688770/7e47852a26f5c07d.png)
选择第三个焦点矩形图,触发鼠标单击事件
![](https://img.haomeiwen.com/i22688770/48db4ffe1e34dcbc.png)
选择动态面板【焦点】,双击焦点三进入
![](https://img.haomeiwen.com/i22688770/36d5a4bfd248d25a.png)
选择第一个焦点矩形图,触发鼠标单击事件
![](https://img.haomeiwen.com/i22688770/863b4e5f4ebd02ee.png)
选择第二个焦点矩形图,触发鼠标单击事件
![](https://img.haomeiwen.com/i22688770/d8b535c0245ec625.png)
以上就是本期两种幻灯图片效果原型的全部内容了,你学会了吗?
网友评论