制作图片轮显效果
任务描述
带按钮的轮换显示的横幅广告，五张广告图片循环显示，并且下面的标题随图片显示不同的内容，单击数字按钮时可以即时显示对应的图片和相应的标题，如图显示的效果所示。
任务分析
（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;
