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

实训案例名称实现鼠标滑入焦点图切换效果本实例使用制作一个实例，该实例展示广告图片左右滚动替换主要涉及的语法JavaScript JavaScript是方法documenl.getElementById在事件的使用中，常常会看到方法该方法常用于获取元素，window.onload document.getElementByld其最初被定义为接口的成员，之后在级中移入接口HTML DOM2DOM XMLDOM属于对象,是一个方法document.getElementByld host示例代码如脚本所示10-2脚本10-

2.html!DOCTYPE htmlhtmlheadmetahttp-equiv=Content-TypeH content=text/html;charset=utf-8vtitleJs实现鼠标滑入焦点图切换效果〈/title〉style.30PT{font-size:30pt;font・family:微软雅黑；color:#0099CC}*{margin:O;padding:O;}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;}#pics li{position:absolute;visibility:hidden;}#pics li.show{visibility:visible;}#pics liimg{vertical-align:middle;}.operate{width:240px;height:20px;line-height:20px;background:#ccc;position:absolute;bottom:0px;}#button{float:right;}#button li{float:left;width:20px;height:20px;text-align:center;margin:03px;font-family:Ariar;font-size:12px;color:#fff;background:#000;}#button li.current{background:#fOO;cursor:pointer;}/style/headbodydiv class-area middivulid=HpicsMli class=show id=oneimg src=nimages/

1.jpg width=240“height=H2007/lili id=,two,,img src=,,images/

2.jpgH width=240,height=u2007/lili id=,threenimg src=images/

3.jpg”width=H240n height=H2007/lili id=,four,,img src=nimages/

4.jpg width=240height=,,2007/lili id=,five,img src=Himages/

5.jpg width=240height=u2007/li/ul/divdiv class=noperateul id=,,buttonli class=current id=,but_one1/lili id=but_two2/lili id=,,but_threen3/lili id=,,but_four,,4/lili id=nbut_five5/li/ul/div/divscript type=text/javascriptvar pics=document.getElementByldfpics;var images=pics.getElementsByTagNameli；var button=document.getElementByld,button,.getElementsByTagName,,li;function initindex{fori=index;ibutton.length;i++{为图片的序号值“indexmouseOverSwitchPici;function mouseOverSwitchPici{var piclndex=i;//为赋值按钮添加「可以触发函数piclndex i.button onmouseovebutton[i].onmouseover=functionchange{forj=0;jthis,parentNode.childNodes.length;j++{〃以当前触发事件的元素为起点的父节点的所有子节点this〃的值为最高值，开始遍历.；lengththis.parentNode.childNodes[j].className=”；〃以当前触发事件的元素为起点thisa〃的父节点的所有子节点的为空.危险慎用.；classNamethis.className=,current,;////this.即当前禽虫发onmouseover的元素的className为current”;{〃以为最高值进行遍历.遍历form=0;mvimages.length;m++images.length images;images[m].className=n;//;W空所有mages图片中所有元素的className;if m==piclndex{images[m].className=,,show,;//images图片的第个元素的值为piclndex classNameshow;}}initO;/script/body图鼠标滑入焦点图切换效果/html

10.2页面运行效果如图所示

10.2。