js实现无缝滚动特效

本文介绍了js实现无缝滚动特效所需的功能和关键js代码，并分享给大家参考。具体内容如下。

运行渲染：

结合所学知识，做一个模拟综合拓展练习~ ~一般功能如下：

1.点击html后，图片会自动移动显示。2.点击左右方向改变图片的移动方向(改变左、正或负的值)。3.将鼠标移进移出图片后，图片会暂停(setinterval，clearinterval)。4.将鼠标移到图片上并高亮显示(a:悬停)。5.点击小图，下面的大图会改变。6.文本区域将跟随图片。

Window.onload=function(){//声明部分(现在的习惯是写什么声明，容易忘记。不知道好不好。)varo div=document . getelementbyid(' box ')；var OUl=Odiv . GetElementsBytagname(' ul ')；var OLi=OUl . GetElementsBytagname(' Li ')；变化速度=2；var计时器=null//Double ul的内容实现无缝滚动oul . innerhtml=oul . innerhtmloul . innerhtml；oUl.style.width=oLi[1]。offsetWidth * oLi.length ' px//move函数函数move(){ oul . style . left=oul . offsetleftspeed ' px '；//控制左if(oul.offsetlft-oul.offsetwidth/2){ oul . style . left=0；}//控制右if(oul . offsetleft 0){ oul . style . left=-oul . offsetweidth/2 ' px '；} }//点击图标控制移动方向。varoleft=document . getelementbyid(' JT _ left ')；var originht=document . getelementbyid(' JT _ right ')；oleft . onclick=function(){ speed=-2；} originht . onclick=function(){ speed=2；}//鼠标进出效果odiv。onmouseover=function(){ clear interval(计时器)；} odiv . onmouseout=function(){ timer=setInterval(move，20)；}timer=setInterval(move，20)；//点击获取大图var aa=odiv . getelementsbytagname(' a ')；for(var I=0；iaA.lengthi ){aA[i]。onclick=function(){ show pic(this)；返回false} }函数show pic(what pic){ var source=what pic . href；var占位符=document.getElementById('占位符')；placeholder.src=源；}}最后一个文字替换效果，本来想用图片来改变文本框对应的数字~ ~结果不成功，不知道为什么，而且这方面还需要改进。希望大家能提供一些好的建议，不过js已经实现了正常的无缝滚动，希望对大家有所帮助。