经常有朋友问无间断滚动新闻和无间断滚动图片的代码,我们都知道,即使有代码,不去理解以后还是要找代码来解决,于是写了这个教程,让朋友们把它刻在脑子里,随时随地都能写出这个代码来.建议以后帖代码的朋友附上自己对代码里语法的理解,让其他人也能分享其中的乐趣.
    
    原理:要实现图片的无间断滚动,需要有两个层,这两个层的innerHTML要一模一样,而且是一起滚动. 假设第一层ID为fDiv,第二个层ID为sDiv, 还有ID为main这个层包围在这两个层的外面. 我们所要做的只是让main.scrollTop(外面这个大层移动到离起始的位置之间的距离)移动,并且判断它是否移动到了第一个层或第二个层的总高度这么一个距离,这个时候第一个层的最后一张图片正好跑出视觉范围,第二个层的第一张图片整图显示,我们让外面这个大层还原到没有移动之前的位置,即障眼法,人的视觉不会察觉到. 说了这么多没理解不要紧,看代码就一目了然了. [转自：711网络工作室 http://www.tc711.com]

    

<div id=main style="overflow:hidden;height:200px;width:150px"> <div id=fDiv><img width=150px height=200px alt="图片1"><br> <img width=150px height=200px alt="图片2"><br> <img width=150px height=200px alt="图片3"><br> <img width=150px height=200px alt="图片4"><br></div> <div id=sDiv></div> <script> sDiv.innerHTML=fDiv.innerHTML; function ScrollDiv(){ main.scrollTop++; if(main.scrollTop>=800){ main.scrollTop=0; } } ye=setInterval("ScrollDiv();status=main.scrollTop",10); main.onmouseover=new Function("clearInterval(ye)"); main.onmouseout=new Function("ye=setInterval('ScrollDiv();status=main.scrollTop',10)"); </script>

 [转自：711网络工作室 http://www.tc711.com]

    overflow:hidden==>即让整个层即使溢出显示范围,也不显示滚动条.
    sDiv.innerHTML=fDiv.innerHTML==>当然你也以把fDiv内部的HTML代码写成和sDiv一样,这个只是偷懒的做法.
    main.scrollTop++;==> 让整个大层向上滚动.
    if(main.scrollTop>=800){==>即判断整个大层是否移动到了第一个层或第二个层的总高度这么长的距离,800是由一张图片的200*4张图片算得的,代码可以加精,以便图片的增加或减少变得自动化一点,这个自己应该会改,我就不改了,这里为了解说方便,呵呵.
    ye=setInterval("ScrollDiv();status=main.scrollTop",10);==>设置定时器,每过10毫秒就执行ScrollDiv()这个函数,status=main.scrollTop是偶加的,目的是让大家注意状态栏的数字,当它显示到了800的时候,图片的显示情况,便于理解.
    main.onmouseover=new Function("clearInterval(ye)");
    main.onmouseout=new Function("ye=setInterval('ScrollDiv();status=main.scrollTop',10)");==>即两个常用的鼠标事件,鼠标移到层上就停止定时器,移开又重新设置定时器. new Function()相信大家已经很熟悉了,自定义函数的其中一种写法而已. 另外两种写法为:
    
    function 函数名(){ 代码块}
    
    和:
    
    对象.事件=function(){代码块}
    
    其效果是一样的.