主要内容
在雅虎首页，新闻焦点大图和焦点小图同步切换轮播，本课程我们来学习如何实现这个效果。
交互说明
1.页面载入后，切换当前屏幕显示的5张焦点图，小图标处以横线提示当前焦点图。
2.鼠标移入焦点大图，新闻标题显示选中状态，停止焦点图轮播。鼠标移出焦点大图，新闻标题恢复正常状态，继续焦点图轮播。
3.鼠标移入每张焦点小图，焦点大图显示鼠标停留的焦点小图，横线移动到鼠标停留的焦点小图上。鼠标移出焦点小图，继续焦点图轮播。
4.点击左、右按钮，切换上一屏、下一屏焦点小图，“页面标签”显示当前5张焦点小图页码。
5.点击播放/暂停按钮，暂停或重新播放焦点图轮播。
1.原型制作
步骤1
拖入图片部件，设置位置与大小，x:0 y：0 w：595 h:250，命名：1-1，编辑文字：1；
拖入矩形，放在图片部件上面，设置位置与大小，x:0 y：180 w：595 h:70，命名：标题1-1，设置它的不透明度为70，并在交互样式中设置它选中时不透明度为90；
编辑文本：标题1、内容介绍、查看更多，并设置字体的样式；
选中这两个部件转换为动态面板，命名：内容，新增4个状态，使动态面板有5个状态，复制状态1的内容到4个状态中，分别修改文字为：2/标题2、3/标题3、4/标题4、 5/标题5，图片部件和矩形命名也分别修改为：
2-1/标题2-2、3-1/标题3-2、4-1/标题4-2、5-1/标题5-2
步骤2
拖入矩形和水平线，调整线条角度和颜色、组合，制作左、右两个按钮，设置矩形的大小为w：18 h:100，分别名为：左、右，设置矩形选中时的样式
拖入图片热区，分别覆盖在左、右两个按钮上面，分别名为：左、右
步骤3
拖入图片部件，设置位置与大小：x:19 y：250 w：112 h:50，编辑文字：1，复制4个同样的图片部件，分别编辑文字为2、3、4、5，放在并列的位置， 分别命名：小图１、小图2、小图3、小图4、小图5；
拖入矩形，设置位置与大小：x:19 y：300 w：113 h:50，复制4个同样的矩形，放在并列的位置，在第一个矩形输入：标题；
拖入图片热区，调整位置与大小，分别覆盖在图片部件和矩形上面，分别命名为：焦点小图1、焦点小图2、焦点小图3、焦点小图4、焦点小图5
步骤4
拖入水平线，设置位置：x:19 y：342 长度为：19，线条颜色：紫色，放在小矩形上面，命名：指示
步骤5
拖入单行文本标签，编辑文字：1-5 共15，命名：页码
步骤6
拖入图片部件，导入播放按钮，命名：播放，导入它选中时的图片是暂停按钮
2.设置页面载入时事件
步骤7
选中“内容”动态面板，双击“页面载入时”事件，打开用例编辑器设置
动作1
第二步：点击新增动作，选择“等待”动作
第四步：配置动作，等待时间2000毫秒
动作2
第二步：点击新增动作，选择“设置面板状态”
第四步：配置动作 勾选“内容”前复选框，选择状态“Next”，选择“从最后一个到第一个自动循环”，循环间隔：2000毫秒
3、设置鼠标移入时、鼠标移出时事件
步骤8
选中“内容”动态面板，双击“鼠标移入时”事件，打开用例编辑器
第一步：编辑条件：如果“动态面板状态=状态1”
第二步：点击新增动作，选择“移动”动作
第四步：配置动作，勾选“指示”前复选框，移动：绝对位置，x：19 y：342
步骤9
重复步骤8（或复制），“鼠标移入时”事件用例，修改用例副本（用例2-5）
用例2
第一步：编辑条件：如果“动态面板状态=状态2”
第二步：移动
第四步：指示，绝对位置，x：131 y：342
用例3
第一步：编辑条件：如果“动态面板状态=状态3”
第二步：移动
第四步：指示，绝对位置，x：243 y：342
用例4
第一步：编辑条件：如果“动态面板状态=状态2”
第二步：移动
第四步：指示，绝对位置，x：355 y：342
用例5
第一步：编辑条件：如果“动态面板状态=状态2”
第二步：移动
第四步：指示，绝对位置，x：467 y：342
步骤10
在“内容”动态面板，状态1编辑区，选中“1-1”双击“鼠标移入时”事件，打开用例编辑器
动作1
第二步：点击新增动作，选择“选中”动作
第四步：配置动作，勾选“标题1-1”前复选框，值 ，true
动作2
第二步：点击新增动作,选择“设置面板状态”动作
第四步：配置动作，勾选“内容”前复选框，选择状态：状态1
步骤11
在状态2-5，分别设置“2-2、3-2、4-2、5-2”的“鼠标移入时”事件，参考重复步骤10，修改动作数值
2-2
动作1：标题2-2
动作2：状态2
3-2
动作1：标题3-2
动作2：状态3
4-2
动作1：标题4-2
动作2：状态4
5-2
动作1：标题5-2
动作2：状态5
步骤12
在“内容”动态面板，状态1编辑区，选中“1-1”双击“鼠标移出时”事件，打开用例编辑器
动作1
第二步：点击新增动作，选择“选中”动作
第四步：配置动作，勾选“标题1-1”前复选框，值 ，false
动作2
第二步：点击新增动作,选择“等待”动作
第四步：配置动作，2000毫秒
动作3
第二步：点击新增动作，选择“设置面板状态”动作
第四步：配置动作，勾选“内容”前复选框，选择状态“Next”,选择“从最后
一个到第一个自动循环”，循环间隔：2000毫秒
步骤13
在状态2-5，分别设置“2-2、3-2、4-2、5-2”的“鼠标移出时”事件，参考重复步骤12，修改动作数值
2-2
动作1：标题2-2
3-2
动作1：标题3-2
4-2
动作1：标题4-2
5-2
动作1：标题5-2
4、设置鼠标移入时、鼠标移出时事件
步骤14
选中焦点小图1，双击“鼠标移入时”事件，打开用例编辑器
动作1
第二步：点击新增动作 选择“设置面板状态”动作
第四步：配置动作 勾选“内容”前复选框，选择状态“状态1”
动作2
第二步：点击新增动作 选择“移动”动作
第四步：配置动作 勾选“指示”前复选框，移动：绝对位置，x：19 y：342
步骤15
分别设置“焦点小图2、焦点小图3、焦点小图4、焦点小图5”图像热区，参考重复步骤14的操作，设置“鼠标移入时”事件，修改动作设置
焦点小图2
动作1：设置到“内容”状态2
动作2：移动：绝对位置，x：131 y：342
焦点小图3
动作1：设置到“内容”状态3
动作2：移动：绝对位置，x：243 y：342
焦点小图4
动作1：设置到“内容”状态4
动作2：移动：绝对位置，x：355 y：342
焦点小图5
动作1：设置到“内容”状态5
动作2：移动：绝对位置，x：467 y：342
步骤16
选中焦点小图1，双击“鼠标移出时”事件，打开用例编辑器
动作1
第二步：点击新增动作 选择“等待”动作
第四步：配置动作，等待时间2000毫秒
动作2
第二步：点击新增动作 选择“设置面板状态”动作
第四步：配置动作 勾选“内容”前复选框，选择状态“Next”,选择“从最后一个到第一个自动循环”，循环间隔：2000毫秒
步骤17
分别设置“焦点小图2、焦点小图3、焦点小图4、焦点小图5”图像热区，参考重复步骤16的操作，设置“鼠标移出时”事件
5.设置“鼠标单击时、鼠标移入时、鼠标移出时”事件
步骤18
选中“右”图像热区，双击“鼠标单击时”事件，打开用例编辑器
第一步：编辑条件：如果部件文字.小图1=1
动作1
第二步：点击新增动作，选择“设置文本”动作
第四步：配置动作，勾选“小图1”前复选框，将文本设置为：值=6
重复设置文本动作，依次设置“小图2=7、小图3=8、小图4=9、小图5=10
动作2
第二步：点击新增动作，选择“设置文本”动作
第四步：配置动作，勾选“页码”前复选框，将文本设置为：6-10共15
步骤19
继续选中“右”图像热区，参考（或复制）步骤18，设置“鼠标单击时”事件用例2-3，修改用例条件
用例2
第一步：编辑条件，如果：小图1=6
动作1
“小图1=11、小图2=12、小图3=13、小图4=14、小图5=15
动作2
将文本设置为：11-15共15
用例3
第一步：编辑条件，如果：小图1=11
动作1
“小图1=1、小图2=2、小图3=3、小图4=4、小图5=5
动作2
将文本设置为：1-5共15
步骤20
选中“左”图像热区，设置“鼠标单击时”事件
第一步：编辑条件：如果部件文字.小图1=11
动作1
第二步：点击新增动作，选择“设置文本”动作
第四步：配置动作，勾选“小图1”前复选框，将文本设置为：值=6
重复设置文本动作，依次设置“小图2=7、小图3=8、小图4=9、小图5=10
动作2
第二步：点击新增动作，选择“设置文本”动作
第四步：配置动作，勾选“页码”前复选框，将文本设置为：6-10共15
步骤21
继续选中“左”图像热区，参考（或复制）步骤20设置“鼠标单击时”事件用例2-3，修改用例条件
用例2
第一步：编辑条件，如果：小图1=6
动作1
“小图1=1、小图2=2、小图3=3、小图4=4、小图5=5
动作2
将文本设置为：1-5共5
用例3
第一步：编辑条件，如果：小图1=1
动作1
“小图1=11、小图2=12、小图3=13、小图4=14、小图5=15
动作2
将文本设置为：11-15共15
步骤22
选中“左”图片热区，双击“鼠标移入时”事件，打开用例编辑器
动作1
第二步：点击新增动作，选择“选中”动作
第四步：配置动作，勾选“左”形状前复选框，选择选定状态到：值，true
步骤23
选中“左”图片热区，双击“鼠标移出时”事件，打开用例编辑器
动作1
第二步：点击新增动作，选择“选中”动作
第四步：配置动作，勾选“左”形状前复选框，选择选定状态到：值，false
步骤24
选中“右”图片热区，参考重复步骤22、23，设置“鼠标移入时、鼠标移出时”事件，把“左”修改为“右”
6.设置“鼠标单击时”时事件
步骤25
选中“播放”按钮，双击“鼠标单击时”时事件，打开用例编辑器
第一步，编辑条件：如果“选中状态值”播放“=”值“true”
动作1
第二步：点击新增动作，选择“选中”动作
第四步：配置动作，勾选“播放”前复选框，选择选定状态到：值，false
动作2
第二步：点击新增动作 选择“设置面板状态”动作
第四步：配置动作 勾选“内容”前复选框，选择状态“Next”,选择“从最后一个到第一个自动循环”，循环间隔：2000毫秒
步骤26
继续选中“播放”按钮，设置“鼠标单击时”时事件，
第一步，编辑条件：如果“选中状态值”播放“=”值“false”
动作1
第二步：点击新增动作，选择“选中”动作
第四步：配置动作，勾选“播放”前复选框，选择选定状态到：值，true
动作2
第二步：点击新增动作 选择“设置面板状态”动作
第四步：配置动作 勾选“内容”前复选框，选择状态“停止循环”
步骤27
生成原型，预览效果
- End -