最近用到了,仿照别人的写了一个
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <!--“向左”，“滚动”，这是要解决的要点，而这两方向，都与对象的scrollLeft属性相关。对于scrollLeft,直白理解就是：对象的内容（即其整个innerHTML)，如果能够左右滚动的话（这是前提条件），它在某时刻左边滚动了的像素距离（结果为数字，并且该属性是可写可读的）。这里需要注意的是，虽然document.body.scrollLeft需要考虑兼容性问题，但其它的div的scrollLeft是兼容的，这里无需考虑兼容性问题。 所以不管读取或者设置scrollLeft的值，都必须有个前提条件：能左右滚动！！！ 比如有一个id=mydiv的DIV,在一个不能左右滚动的前提条件下，比如其overflow设置为visible或者overflow没有设置.它会怎么样呢？ mydiv会表现为被内容自动撑开,内容有多长多宽，div就自动多长多宽，div不出现滚动条。这时候scrollLeft读取到的值为0，并且无论如何设置scrollLeft的值，它都为0。这可以说明，如果其不能左右滚动，那scrollLeft就一直为0. 接下来，我们准备制造出“能左右滚动”的这种前提条件。 要出现scrollLeft，就必须：能左右滚动。这个限制会让我们将对象的overflow属性设置成auto，hidden,scroll,并且限制对象的width。但往往auto只会造成上下滚动而非左右。所以我们只能考虑scroll与hidden。--> <style> #mydiv{600px; height:100px; margin:100px; border:3px solid #8ec2f5; padding:0; background:#d6e9fc; overflow:hidden;} #mysubdiv{margin:0; padding:0; 9999px; height:100px} #mypicdiv{margin:0; padding:0; auto; height:100px; float:left;} #mypicdiv2{margin:0; padding:0; auto; height:100px; float:left} img{100px; height:100px} #mydiv a{float:left; margin:0 10px;} </style> </head> <!--目前它要走的空白已经短了，为了让它的空白全部消除，最原先我们的办法可以是： 1.多造几个mypicdiv那样的浮动块，占够位置。 2.将mysubdiv的width改少一些。 但这两种办法都无法彻底将空白删除，不是剩余空白就是不够空白导致换行。 那有没有一种办法能够不用消灭空白而直接可以“连接向左滚动”的呢？ 办法就是：当刚好滚动了一个mypicdiv的距离的时候（"刚好"的意思，这需要很精细的刻度，所以需要让scrollLeft每次变化尽量少，即每次变化+1,而一个mypicdiv的距离，需要用到对象属性：offsetWidth），又重新回到mypicdiv去滚动（即让scrollLeft=0)。这样，就会连续滚动mypicdiv,并且后边接着的mypicdiv2就能造成无缝的效果。 代码如下：--> <body> <div id="mydiv"> <div id="mysubdiv"> <div id="mypicdiv"> <a href="#"><img src="images/3925982_001.jpeg" /></a> <a href="#"><img src="images/3925983_02.jpeg" /></a> <a href="#"><img src="images/3919037_二维码_14322baa-270b-4841-aa83-5a8d211b610b_resize_picture.png" /></a> <a href="#"><img src="images/3925979_01.jpeg" /></a> <a href="#"><img src="images/3925985_002.jpeg" /></a> <a href="#"><img src="images/3925986_03.jpeg" /></a> <a href="#"><img src="images/3925989_003.jpeg" /></a> </div> <div id="mypicdiv2"></div> </div> </div> </body> <script> var speed = 10; var mydiv = document.getElementById('mydiv'); var mypicdiv = document.getElementById('mypicdiv'); var mypicdiv2 = document.getElementById('mypicdiv2'); mypicdiv2.innerHTML = mypicdiv.innerHTML; var myScroll = function(){ if(mydiv.scrollLeft>=mypicdiv2.offsetWidth){ mydiv.scrollLeft=0; mydiv.scrollLeft-=mypicdiv.offsetLeft; }else{ mydiv.scrollLeft = mydiv.scrollLeft+1; } } /*根据人眼每帧看到的24幅画面以上则认为是连续动画效果,让1000/24~=42.当数量大于24时,speed小于42,设置speed为小于42的数值最佳,让滚动显示无缝,流畅 另外,速度越小,滚动越快*/ //window.setInterval(myScroll,speed); <!--鼠标经过时停止滚动 用clearInterval 清除定时器--> var MyMar=setInterval(myScroll,speed); mydiv.onmouseover=function() {clearInterval(MyMar)}; <!--鼠标移开时重设定时器--> mydiv.onmouseout=function() {MyMar=setInterval(myScroll,speed)}; </script> <!--这样就简单地完成了一个图片无缝向左滚动。设置mydiv的overflow:hidden，去除滚动条（但隐式地有“能左右滚动”），让美观更好一点。注意：document.title=mydiv.scrollLeft;这一行只用于调试查看，实际用途中必须删除。--> <!--从JS角度上看，需要知道的技术也不过如下： innerHTML,scrollLeft,offsetWidth,setInterval--> </html>