JavaScript程序设计基础教程实训指导-10-2 实训案例名称：实现鼠标滑入焦点图切换效果.docxVIP

实训案例名称：实现鼠标滑入焦点图切换效果

本实例使用JavaScript制作一个实例，该实例展示广告图片左右滚动替换。主要涉及的JavaScript语法是document.getElementById()方法。

在window.onload事件的使用中，常常会看到document.getElementById()方法，该方法常用于获取元素，其最初被定义为HTMLDOM接口的成员，之后在2级DOM中移入XMLDOM接口。document.getElementById属于host对象，是一个方法。

示例代码如脚本10-2所示。

脚本10-2.html

!DOCTYPEhtml

html

head

metahttp-equiv=Content-Typecontent=text/html;charset=utf-8

titleJs实现鼠标滑入焦点图切换效果/title

style

.30PT{font-size:30pt;font-family:微软雅黑;color:#0099CC}

*{margin:0;padding:0;}

ul,li{list-style:none;}

.mid{margin:0auto;}

.area{width:240px;height:200px;overflow:hidden;background:#999;margin-top:150px;position:relative;}

#pics{position:relative;}

#picsli{position:absolute;visibility:hidden;}

#picsli.show{visibility:visible;}

#picsliimg{vertical-align:middle;}

.operate{width:240px;height:20px;line-height:20px;background:#ccc;position:absolute;bottom:0px;}

#button{float:right;}

#buttonli{float:left;width:20px;height:20px;text-align:center;margin:03px;font-family:Arial;font-

size:12px;color:#fff;background:#000;}

#buttonli.current{background:#f00;cursor:pointer;}

/style

/head

body

divclass=areamid

div

ulid=pics

liclass=showid=oneimgsrc=images/1.jpgwidth=240height=200//li

liid=twoimgsrc=images/2.jpgwidth=240height=200//li

liid=threeimgsrc=images/3.jpgwidth=240height=200//li

liid=fourimgsrc=images/4.jpgwidth=240height=200//li

liid=fiveimgsrc=images/5.jpgwidth=240height=200//li

/ul

/div

divclass=operate

ulid=button

liclass=currentid=but_one1/li

liid=but_two2/li

liid=but_three3/li

liid=but_four4/li

liid=but_five5/li

/ul

/div

/div

scripttype=text/javascript

varpics=document.getElementById(pics);

varimages=pics.getElementsByTagName(li);

varbutton=document.getElementById(button).getElementsByTagName(li);

func