任务视频V2.0
任务视频V1.0
知识点
visibility属性
visibility属性设置元素是否可见，此属性的两个值如表所示。
| 值 | 描述 |
| visible | 表示元素是可见的 |
| hidden | 表示元素是不可见的 |
CSS属性可通过JavaScript动态地改变，visibility的脚本语法为：
object.style.visibility="值"
display属性
display属性设置是否显示元素，此属性的常见值如表所示。
| 值 | 描述 |
| none | 表示此元素不会被显示 |
| block | 表示此元素将显示为块级元素，此元素前后会带有换行符 |
CSS属性可通过JavaScript动态地改变，display的脚本语法为：
object.style.display="值"
制作图片轮显效果
任务描述
带按钮的轮换显示的横幅广告，五张广告图片循环显示，并且下面的标题随图片显示不同的内容，单击数字按钮时可以即时显示对应的图片和相应的标题，如图显示的效果所示。
任务分析
（1）.通过document.getElementByTagNamge方式将所有菜单项获取;
（2）.通过循环方式依次遍历菜单项；
（3）.为菜单项绑定鼠标移入、移出事件。鼠标移入时，当前菜单项的背景图和文字发生改变；鼠标移出时，菜单项恢复原来样式。
任务实现
<link href="css/adRotator.css" rel="stylesheet"type="text/css" />
……
<divclass="adver">
<imgsrc="images/adRotator_1.jpg" alt="广告图片" id="Rotator_1" />
<imgsrc="images/adRotator_2.jpg" alt="广告图片" id="Rotator_2" />
<img src="images/adRotator_3.jpg"alt="广告图片"id="Rotator_3" />
<imgsrc="images/adRotator_4.jpg" alt="广告图片" id="Rotator_4" />
<imgsrc="images/adRotator_5.jpg" alt="广告图片" id="Rotator_5" />
<div>
<divid="fig_1" onclick="show(1)">1</div>
<divid="fig_2" onclick="show(2)">2</div>
<divid="fig_3" onclick="show(3)">3</div>
<divid="fig_4" onclick="show(4)">4</div>
<divid="fig_5" onclick="show(5)">5</div>
</div>
</div>
<script type="text/javascript"src="js/rotator.js"></script>
JavaScript代码如下：
// JavaScriptDocument
varnowFrame=1; //用于控制显示哪张图
varmaxFrame=5; //图片数
var timer; //定时器
var title=newArray();
title[0]="1.店庆第一波限时抢购 一日三疯！";
title[1]="2.十年店庆均价场 39/99/169专场！";
title[2]="3.全场69折封顶 享当当的超值低价！";
title[3]="4.店庆钜献海量图书69折封顶";
title[4]="5.十年店庆名家跨界祝贺 珍藏签名本专区";
functionshow(num)
{
if(Number(num))
{
nowFrame=num; //通过参数改变当前播放的图片序号
clearTimeout(timer);
}
for(var i=1;i<(maxFrame+1);i++)
{
if(i==nowFrame)
{
//显示当前图片
document.getElementById("Rotator_"+nowFrame).style.display="block";
//显示图片标题
document.getElementById("fig_"+nowFrame).innerHTML=title[i-1];
//设置数字的样式
document.getElementById("fig_"+nowFrame).className="numberOver"; }
else
{
document.getElementById("Rotator_"+i).style.display="none";
document.getElementById("fig_"+i).innerHTML=i;
document.getElementById("fig_"+i).className="number";
}
}
if(nowFrame==maxFrame)
{
nowFrame=1;
}
else
{
nowFrame++;
}
timer=setTimeout("show()",3000); //设置定时器，3秒钟显示下一张图
}
window.onload=show;
根据所给素材，完成下图效果。当鼠标移到“小说”、“非小说”和“少儿”标签上时，显示左图，如当鼠标移到“非小说”标签时显示右图。
参考答案
