JS小功能(offsetLeft实现图片滚动效果)实例代码

效果

代码：复制代码代码如下： head runat=' server ' title/title style type=' text/CSS ' # div 1 { width : 245 px；高度： 150像素；背景：红色；余量： 250像素左边距左侧： 500像素绝对位置：飞越：隐藏；} #div1 ul li {左侧浮动：宽度： 44px高度： 66px边距-top : 20px；右边距： 5px列表样式：无；} # div1 ul { width: 250px绝对位置：padd : 0；}/style脚本类型=' text/JavaScript '窗口。onload=function(){ var oul=document。getelementsbytagname(' ul ')[0]；var odiv=文档。getelementbyid(' div 1 ')；var Ali=文档。getelementsbytagname(' Li ')；乌尔。innerHTMl=oul。innerHTMl oul。innerHTMloul.style.width=(ali[0]).场外5)*阿里。长度' px；函数roll(){ if(oul。offsetleft=-oul。offset DTH/2){ oul。风格。left=' 0} oul。风格。左=左。offset left-2“px”；} var timer=null timer=setInterval(滚动，30);奥迪夫。onmouseover=function(){ clearInterval(计时器);} odiv。onmouseout=function(){ timer=setInterval(roll，30)；} };/script/head body div id=' div 1 ' ul Li img src=' http :/图像/数字1/0。jpg '/Li Li img src=' http :/图像/数字1/1。jpg '/Li Li img src=' http :/图像/数字1/2。jpg '/Li Li img src=' http :/图像/数字1/3。jpg '/Li Li img src=' http :/图像/数字1/4。jpg '/Li/ul/div/body