阐述了JavaScript学习笔记中基于定时器的图片无缝滚动功能。分享给大家参考，如下：

一、无缝轧制的理论基础

基础知识

1 .设置时间间隔(功能、时间)、清除时间间隔(定时器)

SetInterval()方法可以在指定的时间段(以毫秒为单位)调用函数或计算表达式。SetInterval()方法将一直调用函数，直到调用clearInterval()或关闭窗口。setInterval()返回的ID的值可以作为clearInterval()方法的参数。

ClearInterval()方法取消了setInterval()设置的超时。clearInterval()方法的参数必须是setInterval()返回的ID值。

2.2.offsetLeft和style.left的区别

OffsetLeft获取相对于父对象的左边距

获取或设置相对于具有定位属性的父对象的左边距(位置定义为相对)

如果父div的位置被定义为相对的，子div的位置被定义为绝对的，那么子div的style.left的值相对于父div的值。

这与offsetLeft相同，区别在于：

1.style.left返回一个字符串，如28px，offsetLeft返回一个值28。如果需要计算得到的值，使用offsetLeft更方便。2.style.left是读写的，offsetLeft是只读的，所以要改变div的位置，只能修改style.left. 3。值3。style.left需要提前定义，否则得到的值为空。而且必须用html来定义。我做过实验。如果在css中定义，style.left的值仍然为空。这是我一开始遇到的问题，总是得不到style.left的价值。

OffsetLeft仍然可以在不预先定义div位置的情况下进行检索。

第二，代码片段

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题无缝滚动/title style * { margin : 0；padd : 0；} # div 2 { width : 400 pxmargin : 100 px自动；}输入{ margin:0 auto文本对齐：中心；左边距left : 80px font-size : 40px；} # div1 { width: 712px高度： 108像素；余量： 100像素自动；相对位置：背景-颜色：红色；飞越：隐藏；} # div 1 ul {位置：绝对值；左： 0；top : 0；} #div1 ul li{左侧浮动：宽度： 178像素；高度： 108像素；列表式：无；}/样式脚本窗户。onload=function(){ var Odiv=document。getelementbyid(' div 1 ')；var OUl=文档。getelementsbytagname(' ul ')[0]；瓦尔阿里=OUl。GetElementsBytagname(' Li ')；var lBtn=文档。getelementbyid(' LBtn ')；var rBtn=文档。getelementbyid(' RbTN ')；//将保险商实验所复制一份相加复制给ul(这样保险商实验所相当于有8张图片)OUl。OUl。OUl。innerHTMloUl.style.width=aLi[0].offsettwidth * AlI . length ' px//速度控制图片移动方向和速度变化速度=2;函数move(){ if(OUl。离岸-OUl。OUl。风格。left=0；}如果(OUl。offsetleft 0){ OUl。风格。左=-OUl。offset itedth/2 ' px '；} oUl.style.left=oUl.offsetLeft速度px '；} var timer=setInterval(move，30)；//鼠标移进时，图片停止运动奥迪夫。onmouseover=function(){ clearInterval(定时器);};//鼠标移出时，图片继续移动奥迪夫。onmouseout=function(){ timer=setInterval(move，30)；} //按钮控制移动方向lbtn。onclick=function(){ speed=-2；} rbtn。onclick=function(){ speed=2；} };/script/head dydiv id=' div 2 '输入类型='按钮'值='向左id='lbtn'/输入类型='按钮'值='向右id=' rbtn '/div/div id=' div 1 ' ul liimg src=' http : images/1。jpg ' alt=' '//Li liimg src=' http : images/2。jpg ' alt=' '//Li liimg src=' http : images/3。jpg ' alt=' '//Li liimg src=' http : images/4。jpg ' alt=' '//Li/ul/div/body/html三、效果图

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript切换特效与技巧总结》 、 《JavaScript查找算法技巧总结》 、 《JavaScript动画特效与技巧汇总》 、 《JavaScript错误与调试技巧总结》 、 《JavaScript数据结构与算法技巧总结》 、 《JavaScript遍历算法与技巧总结》 及《JavaScript数学运算用法总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。