JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
**兼容IE,Firefox遵循W3C标准写法的图片无缝滚动代码（支持左移/右移功能）(本示例为上下两行图片进行双行滚动)
**实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆，
**通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，
**因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到“无缝”滚动的目的。
CodehighlightingproducedbyActiproCodeHighlighter(freeware)http://www.CodeHighlighter.com/--><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headid="Head1"runat="server">
<title></title>
</head>
<body>
<imgsrc="link.gif"style="cursor:pointer"onmouseover="clearright();toleft()"/>
<imgsrc="link1.gif"style="cursor:pointer"onmouseover="clearleft();toright()"/>
<div>
<divid="demo"style="overflow:hidden;width:322px;height:61px">
<tablecellpadding="0"align="left"border="0"cellspace="0">
<tbody>
<tr>
<tdid="demo1"valign="top">
<tablecellspacing="0"cellpadding="0"width="322"bgcolor="#fffbf7"border="0">
<tbody>
<tralign="center">
<tdwidth="50"height="50">
<imgheight="50"src="link.gif"/>
</td>
<tdwidth="50"height="50">
<imgheight="50"src="link1.gif"/>
</td>
<tdwidth="50"height="50">
<imgheight="50"src="link2.gif"/>
</td>
<tdwidth="50"height="50">
<imgheight="50"src="link.gif"/>
</td>
<tdwidth="50"height="50">
<imgheight="50"src="link3.gif"/>
</td>
</tr>
</tbody>
</table>
</td>
<tdid="demo2"valign="top">
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<divid="demo_a"style="overflow:hidden;width:322px;height:61px">
<tablecellpadding="0"align="left"border="0"cellspace="0">
<tbody>
<tr>
<tdid="demo_b"valign="top">
<tablecellspacing="0"cellpadding="0"width="322"bgcolor="#fffbf7"border="0">
<tbody>
<tralign="center">
<tdwidth="50"height="50">
<imgheight="50"src="link.gif"/>
</td>
<tdwidth="50"height="50">
<imgheight="50"src="link1.gif"/>
</td>
<tdwidth="50"height="50">
<imgheight="50"src="link2.gif"/>
</td>
<tdwidth="50"height="50">
<imgheight="50"src="link.gif"/>
</td>
<tdwidth="50"height="50">
<imgheight="50"src="link3.gif"/>
</td>
</tr>
</tbody>
</table>
</td>
<tdid="demo_c"valign="top">
</td>
</tr>
</tbody>
</table>
</div>
</div>
<scripttype="text/javascript">
/*
**兼容IE,Firefox遵循W3C标准写法的图片无缝滚动代码（支持左移/右移功能）(本示例为上下两行图片进行双行滚动)
**
**实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆，
**通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，
**因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到“无缝”滚动的目的。
*/
varspeed1=0//图片左移的速度
varMyMar1//setInterverval方法返回的间隔ID,些ID为全局的调用次数(用于第一行图片)
varMyMar2//setInterverval方法返回的间隔ID,些ID为全局的调用次数(用于第二行图片)
varlefthit=0//记录左移按钮点击次数
varrighthit=0////记录右移按钮点击次数
//调用右移方法前,先让左移停止（clearInterval清除setInterval对方法的调用）
functionclearleft(){
clearInterval(MyMar1)
clearInterval(MyMar2)
}
//图片左移的方法
functiontoleft(){
//判断是否是第一次按下左移按钮（图片往左开始移动的时候，不会在调用此方法。只有当按了右移按钮时，才会把lefthit重设为0）
if(lefthit==0){
speed1=30;//图片左移速度时间毫秒
//让的内容demo2与demo1内容一样
document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML
//上行图片移动的方法
functionMarquee1(){
//当demo滚动至demo2的交界处。与就是与demo2重合时。offsetWidth与scrollLeft刚好相等
if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft<=0){
//demo跳回初始位置
document.getElementById("demo").scrollLeft-=document.getElementById("demo1").offsetWidth
}
else{
//demo开始重新移动
document.getElementById("demo").scrollLeft++
}
}
//setInterval让Marquee1方法每隔多少秒执行一次，并把返回的调用次数ID
MyMar1=setInterval(Marquee1,speed1)
//当鼠标移动demo上面时。调用clearInterval清除MyMar1.这样图片便不会在移动了。移到图片时，第一行和第二行的图片都会停止
document.getElementById("demo").onmouseover=function()
{clearInterval(MyMar1);clearInterval(MyMar2)}
//当鼠标移除demo时,重新setInterval让方法执行，这样图片会继续移动
document.getElementById("demo").onmouseout=function()
{MyMar1=setInterval(Marquee1,speed1);clearInterval(MyMar2);MyMar2=setInterval(Marquee2,speed1)}
//下面的方法与上面的方法一样，用于第二行的图片向左移动
document.getElementById("demo_c").innerHTML=document.getElementById("demo_b").innerHTML
functionMarquee2(){
if(document.getElementById("demo_c").offsetWidth-document.getElementById("demo_a").scrollLeft<=0){
document.getElementById("demo_a").scrollLeft-=document.getElementById("demo_b").offsetWidth}
else{
document.getElementById("demo_a").scrollLeft++
}
}
MyMar2=setInterval(Marquee2,speed1)
document.getElementById("demo_a").onmouseover=function()
{clearInterval(MyMar2);clearInterval(MyMar1)}
document.getElementById("demo_a").onmouseout=function()
{MyMar2=setInterval(Marquee2,speed1);document.getElementById("demo").onmouseout()}
lefthit=1//设置左移按钮，当按了一次左移后(不管按多少次)，在没按右移按钮之前，toleft方法里的的代码不会再被执行
righthit=0//把右移按钮设为0,这样当下次点了右移按钮的时候，以便toright方法被调用
}
}
varMyMar3//setInterverval方法返回的间隔ID,些ID为全局的调用次数(用于第一行图片)
varMyMar4//setInterverval方法返回的间隔ID,些ID为全局的调用次数(用于第二行图片)
varspeed2=0//图片右移的速度
//调用移左方法前,先让右移停止（clearInterval清除setInterval对方法的调用）
functionclearright(){
clearInterval(MyMar3)
clearInterval(MyMar4)
}
//图片右移方法(与图片左移方法思路一样)
functiontoright(){
//判断是否是第一次按下右移按钮（图片往右开始移动的时候，不会在调用此方法。只有当按了左移按钮时，才会把righthit重设为0）
if(righthit==0){
speed2=30;
document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML
functionMarquee_a(){
if(document.getElementById("demo").scrollLeft<=0){
document.getElementById("demo").scrollLeft=document.getElementById("demo2").offsetWidth
}
else{
document.getElementById("demo").scrollLeft--
}
}
MyMar3=setInterval(Marquee_a,speed2)
document.getElementById("demo").onmouseover=function()
{clearInterval(MyMar3);document.getElementById("demo_a").onmouseover()}
document.getElementById("demo").onmouseout=function()
{MyMar3=setInterval(Marquee_a,speed2);clearInterval(MyMar4);MyMar4=setInterval(Marquee_b,speed2)}
document.getElementById("demo_c").innerHTML=document.getElementById("demo_b").innerHTML
functionMarquee_b(){
if(document.getElementById("demo_a").scrollLeft<=0){
document.getElementById("demo_a").scrollLeft=document.getElementById("demo_c").offsetWidth
}
else{
document.getElementById("demo_a").scrollLeft--
}
}
MyMar4=setInterval(Marquee_b,speed2)
document.getElementById("demo_a").onmouseover=function()
{clearInterval(MyMar4);clearInterval(MyMar3)}
document.getElementById("demo_a").onmouseout=function()
{MyMar4=setInterval(Marquee_b,speed2);document.getElementById("demo").onmouseout()}
righthit=1//设置右移按钮，当按了一次右移按钮后(不管按多少次)，在没按左移按钮之前，toright方法里的的代码不会再被执行
lefthit=0//把左移按钮设为0,这样当下次点了左移按钮的时候，以便toleft方法被调用
}
}
</script>
</body>
</html>
以上就是小编为大家带来的JS图片左右无缝隙滚动的实现(兼容IE,Firefox遵循W3C标准)的全部内容了，希望对大家有所帮助，多多支持毛票票~