符合W3C Web标准的图片连续无间隙水平滚动

更新时间：2008年06月30日 22:16:45 作者：

很久以前就有这个问题，总是找不到通用的，或比较简单的“图片连续无间隙向左滚动，无间隙向右滚动，符合W3C Web标准”

这次又遇上一个这样的问题，找了老半天终于从网上找到一个不错的，看了下代码，思路很简单，但代码太多，通用性也不行，于是乎，自己又发明了两个函数，用起来感觉还真不错，与大家共享：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>图片连续无间隙向左滚动，无间隙向右滚动，符合W3C Web标准_</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> </head> <body> <div id="demo" style="overflow: hidden; width: 322px; height: 61px"> <table cellpadding="0" align="left" border="0" cellspace="0"> <tr> <td id="demo1" valign="top"><table cellspacing="0" cellpadding="0" width="322" bgcolor="#fffbf7" border="0"> <tr align="center"> <td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td> <td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td> <td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td> <td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td> <td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td> </tr> </table></td> <td id="demo2" valign="top"></td> </tr> </table> </div> <div id="demo0" style="overflow: hidden; width: 322px; height: 61px"> <table cellpadding="0" align="left" border="0" cellspace="0"> <tr> <td id="demo11" valign="top"><table cellspacing="0" cellpadding="0" width="322" bgcolor="#fffbf7" border="0"> <tr align="center"> <td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td> <td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td> <td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td> <td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td> <td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td> </tr> </table></td> <td id="demo22" valign="top"></td> </tr> </table> </div> <script type="text/javascript" language="JavaScript"> //调用向左滚动 toleft("demo","demo1","demo2",30,"hehe123") //调用向右滚动 toright("demo0","demo11","demo22",20,"hehe1123") function $(id){return document.getElementById(id)} //向左滚动函数，demo包含demo1与demo2,speed是滚动速度，flag一个网页内有多个时设置为不同的任意字符。 //by 柳永法(yongfa365)'Blog　www.yongfa365.com function toleft(demo,demo1,demo2,speed,flag){ demo=$(demo);demo1=$(demo1);demo2=$(demo2) demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo2.offsetWidth-demo.scrollLeft<=0){ demo.scrollLeft-=demo1.offsetWidth } else{ demo.scrollLeft++ } } flag=setInterval(Marquee,speed) demo.onmouseover=function(){clearInterval(flag);} demo.onmouseout=function(){flag=setInterval(Marquee,speed);} } //向右滚动函数，demo包含demo1与demo2,speed是滚动速度，flag一个网页内有多个时设置为不同的任意字符。 //by 柳永法(yongfa365)'Blog　www.yongfa365.com function toright(demo,demo1,demo2,speed,flag){ demo=$(demo);demo1=$(demo1);demo2=$(demo2) demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo.scrollLeft<=0){ demo.scrollLeft=demo2.offsetWidth } else{ demo.scrollLeft-- } } flag=setInterval(Marquee,speed) demo.onmouseover=function(){clearInterval(flag);} demo.onmouseout=function(){flag=setInterval(Marquee,speed);} } </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

以下为网上提供的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Document</title> </head> <body> <img src="images/butt_arrowl.gif" style="cursor:pointer" onmouseover="clearright();toleft()"/> <img src="images/butt_arrowr.gif"style="cursor:pointer" onmouseover="clearleft();toright()"/> <div> <div id="demo" style="OVERFLOW: hidden; WIDTH: 322px; HEIGHT: 61px"> <table cellpadding="0" align="left" border="0" cellspace="0"> <tbody> <tr> <td id="demo1" valign="top"><table cellspacing="0" cellpadding="0" width="322" bgcolor="#fffbf7" border="0"> <tbody> <tr align="center"> <td width="50" height="50"><img height="50" src="images/photo_small01.jpg" /> </td> <td width="50" height="50"><img height="50" src="images/photo_small02.jpg" /> </td> <td width="50" height="50"><img height="50" src="images/photo_small03.jpg" /> </td> <td width="50" height="50"><img height="50" src="images/photo_small06.jpg" /> </td> <td width="50" height="50"><img height="50" src="images/photo_small05.jpg" /> </td> </tr> </tbody> </table></td> <td id="demo2" valign="top"></td> </tr> </tbody> </table> </div> </div> <div> <div id="demo_a" style="OVERFLOW: hidden; WIDTH: 322px; HEIGHT: 61px"> <table cellpadding="0" align="left" border="0" cellspace="0"> <tbody> <tr> <td id="demo_b" valign="top"><table cellspacing="0" cellpadding="0" width="322" bgcolor="#fffbf7" border="0"> <tbody> <tr align="center"> <td width="50" height="50"><img height="50" src="images/photo_small04.jpg" /> </td> <td width="50" height="50"><img height="50" src="images/photo_small07.jpg" /> </td> <td width="50" height="50"><img height="50" src="images/photo_small08.jpg" /> </td> <td width="50" height="50"><img height="50" src="images/photo_small09.gif" /> </td> <td width="50" height="50"><img height="50" src="images/photo_small01.jpg" /> </td> </tr> </tbody> </table></td> <td id="demo_c" valign="top"></td> </tr> </tbody> </table> </div> </div> </body> </html> <script type="text/javascript"> /* **兼容IE,Firefox 遵循W3C标准写法的图片无缝滚动代码（支持左移/右移功能）(本示例为上下两行图片进行双行滚动) ** **实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆， **通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置， **因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到"无缝"滚动的目的。 */ var speed1=0    //图片左移的速度 var MyMar1    //setInterverval方法返回的间隔ID,些ID为全局的调用次数(用于第一行图片) var MyMar2    //setInterverval方法返回的间隔ID,些ID为全局的调用次数(用于第二行图片) var lefthit=0        //记录左移按钮点击次数 var righthit=0    ////记录右移按钮点击次数 //调用右移方法前,先让左移停止（clearInterval清除setInterval对方法的调用） function clearleft(){ clearInterval(MyMar1) clearInterval(MyMar2) } //图片左移的方法 function toleft(){ //判断是否是第一次按下左移按钮（图片往左开始移动的时候，不会在调用此方法。只有当按了右移按钮时，才会把lefthit重设为0） if(lefthit==0){ speed1=30;//图片左移速度时间毫秒 //让的内容demo2与demo1内容一样 document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML //上行图片移动的方法 function Marquee1(){ //当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 function Marquee2(){ 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方法被调用 } } var MyMar3    //setInterverval方法返回的间隔ID,些ID为全局的调用次数(用于第一行图片) var MyMar4    //setInterverval方法返回的间隔ID,些ID为全局的调用次数(用于第二行图片) var speed2=0    //图片右移的速度 //调用移左方法前,先让右移停止（clearInterval清除setInterval对方法的调用） function clearright(){ clearInterval(MyMar3) clearInterval(MyMar4) } //图片右移方法(与图片左移方法思路一样) function toright(){ //判断是否是第一次按下右移按钮（图片往右开始移动的时候，不会在调用此方法。只有当按了左移按钮时，才会把righthit重设为0） if(righthit==0){ speed2=30; document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML function Marquee_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 function Marquee_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>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

详解PHP后期静态绑定分析与应用
这篇文章给大家总结了PHP后期静态绑定分析与应用的相关知识点，对此有兴趣的朋友可以学习下。
2018-03-03
JavaScript ES6中CLASS的使用详解
class是es6引入的最重要特性之一。在没有class之前，我们只能通过原型链来模拟类。这篇文章我们将详细的介绍关于ES6中CLASS的使用，有需要的朋友们可以参考借鉴，下面来一起看看吧。
2016-11-11
uniapp上传二进制图片的实现
本文主要介绍了uniapp上传二进制图片的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
uniapp开发小程序的开发规范总结
uni-app 是一个使用 vue.js 开发跨平台应用的前端框架,下面这篇文章主要给大家介绍了关于uniapp开发小程序的开发规范,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-07-07
BootStrap table删除指定行的注意事项(笔记整理)
在前端开发中遇到这样的问题，对于table指定行的数据进行删除，花了好长时间才解决，今天小编抽时间给大家介绍BootStrap table删除指定行的注意事项，需要的朋友参考下吧
2017-02-02
JavaScript中Set基本使用方法实例
因为Set中存放的数据都是不会重复的数据,我们在编写JS代码的时候,因此我们可以利用Set来帮助我们更便捷地完成许多的事,下面这篇文章主要给大家介绍了关于JavaScript中Set基本使用方法的相关资料,需要的朋友可以参考下
2022-11-11
ECMAScript 数据类型之Number类型
这篇文章主要介绍了 ECMAScript 数据类型之Number类型，Number类型使用IEEE 754格式表示整数和浮点值，更多相关内容请需要的小伙伴参考下面文章内容
2022-06-06
原生javascript实现图片轮播效果代码
前几天用jquery做了一个JS的图片轮播效果，现在用原生的javascript代码实现同样的功能，当练习用吧，代码写得不是很满意。
2010-09-09
js 全世界最短的IE浏览器判断代码
以前最短的IE判定借助于IE不支持垂直制表符的特性搞出来的。
2010-05-05
Echarts实现点击列表联动饼图的示例代码
本文主要介绍了Echarts实现点击列表联动饼图的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-05-05