由以上代码的表现可以看出,如果没有增加后面的复制图片列表,那么就会出现断层现象。同时也可以看出,当图片列表滚动完成之后(这个时候复制图片队列第一 张图片恰好位于图片开始滚动的位置),会重置图片列表原来的状态,再重头开始滚动,同样是因为后面有复制图片队列的缘故,所以不会感觉到重置状态而是不间 断滚动的感觉。
说明:为了便于观察和理解,将scroll对象的 overflow属性值设置为scroll,实际应用中改为hiiden即可。
二.以下是对代码的解释:
1.var speed=10;设置滚动速度。setInterval(done,speed),这样每隔10毫秒就会执行一次done()函数。
2.document.getElementById("second").innerHTML=document.getElementById("first").innerHTML用来复制图片队列。
3.done() 函数中,if(document.getElementById("second").offsetWidth- document.getElementById("scroll").scrollLeft<=0)用来判断第一个图片队列是否已经完成滚动完 成,如果滚动完成,那么重置图片队列。offsetWidth可以获得对象的宽度,scrollLeft可以获得scroll对象向左滚动的长度,所以如 果first对象的长度减去scroll对象向左滚动的长度小于等于零,那么就说明第一个图片队列滚动完成了,如果没有滚动完成的话,则继续滚动。
4.document.getElementById("scroll").onmouseover=function (){clearInterval(MyMar)}的作用是当鼠标放在滚动图片上的时候,停止滚动,需要对
clearInterval()有所了解。
5.document.getElementById("scroll").onmouseout=function (){MyMar=setInterval(done,speed)}的作用是当鼠标离开滚动图片的时候,继续滚动,需要对
setInterval()有所了解。