JavaScript程序设计基础教程实训指导-10-9 实训案例名称：实现图片自动滚动效果

实训案例名称实现图片自动滚动效果本实例使用实现图片滚动展示效果，涉及的语法如下JavaScript JavaScriptInnerHTML几乎所有的元素都有属性，它是一个字符串，用来设置或获取位于对象起始和结束标签内InnerHTML的HTMLo示例代码如脚本10・9所示脚本10-

9.html!DOCTYPE htmlhtmlheadmetahttp-equiv=HContent-Type content=,,text/html;charset=utf-8vtitle Js实现图片自动滚动效果v/tidestyle type=text/cssn/container{background:#FFF;overflow:hidden;border:1px dashed#CCC;width:500px;#inner{float:left;width:800%;#pics{float:left;#goal{float:left;padding-left:5px;/style/headbodydiv id=container”,div id=ninnerMdiv id=picsna href=,#,img src=.com/uploads/allimg/140513/235059-

14051310145412.jpg width=100height=n100border=H0//aa href=,#img src=http:aimg.taopic.com/uploads/allimg/140513/235059-

14051310145412.jpg”width=100”height=n100H border=,,On//aa href=,#,img src=.com/uploads/allimg/140513/235059-

14051310145412.jpg width=TOO”height=“100border=“0//aa href=#img src=.com/uploads/allimg/140513/235059-

14051310145412.jpg widthWOO”height*00”border=,0,//aa href=,#,img src=.com/uploads/allimg/140513/235059-

14051310145412.jpg width=H100height*00”border=0M//aa href=K#img src=.com/uploads/allimg/140513/235059-

14051310145412.jpg width=100height=n100nborder=On//a/divdiv id=goarx/div/div/div/bodyscript type=text/javascriptfunction{var speed=10;var tab=document.getElementByldncontainer;var tabi=document.getElementByldpics;var tab2=document.getElementByldgoar*;tab

2.innerHTML=tab

1.innerHTML;function move{iftab

2.offsetWidth-tab.scrollLeft=0{tab.scrollLeft-=tab

1.offsetwidth}else{tab.scrollLeft++;var timer=setlntervalmove,speed;tab.onmouseover=function{clearlntervaltimer};tab.onmouseout=function{timer=setlntervalmove,speed};/script/html网页显示效果如图所示

10.9图

10.9图片自动滚动效果。