图片无缝滚动(横向)

其实也没什么大问题,但是还是记一下~

今天想搞个js实现图片水平无间断滚动的代码~

到网上翻了一下资料,最多被转的应该就是下面这段代码了,可是改成自己想用的效果的时候却受到了限制!

<base href="http://www.7880.com">
  <div id=demo style=overflow:hidden;height:33;width:500;background:#214984;color:#ffffff>
<table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top>
<img src="images/link/flashempire.gif"><img src="images/linklogo/shlogo.gif">
<img src="images/link/deskcity.gif"><img src="images/linklogo/5dmeng.gif">
<img src="/Upload/2004_Pack/logo.gif"><img src="images/link/flashskylogo.gif">
<img src="images/link/5dlogo88.gif"><img src="/Upload/2004_Pack/link.gif">
<img src="images/flash8.gif"></td><td id=demo2 valign=top></td></tr></table></div>
  <script>
  var speed=30
  demo2.innerHTML=demo1.innerHTML
  function Marquee(){
  if(demo2.offsetWidth-demo.scrollLeft<=0)
  demo.scrollLeft-=demo1.offsetWidth
  else{
  demo.scrollLeft++
  }
  }
  var MyMar=setInterval(Marquee,speed)
  demo.οnmοuseοver=function() {clearInterval(MyMar)}
  demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
  </script>  

这代码给一个急需要的人有用么?

尝试着改了一下div的长度和宽度 才发现根据以上的代码,来更改长度无法滚动,或是只滚动了一张图片就跳了~

其实原理也不过是通过demo1和demo2的的无缝连接来实现的~

修改后的代码:

 <table width="1003" border="0" align="center" cellpadding="0" cellspacing="0">//这个table是用来放div的~ 在你的页面设置具体的位置
     <tr>
       <td><div id=demo style="overflow:hidden; height:160; width:1003;">//此处的1003就是你要显示滚动部分的长度
<table width="1003" height="160" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">//这里的宽度不要低与div的宽度 就可以不间断滚动了~
<tr>
<td id=demo1 valign=top>
<table width="1003" height="160" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
        <td><img src="img/tupian.gif" width="150" height="150" /></td>
        <td><img src="img/tupian1.gif" width="150" height="150" /></td>
        <td><img src="img/tupian2.gif" width="150" height="150" /></td>
        <td><img src="img/tupian.gif" width="150" height="150" /></td>
        <td><img src="img/tupian1.gif" width="150" height="150" /></td>
        <td><img src="img/tupian2.gif" width="150" height="150" /></td>
    </tr>
    </table>
</td>
<td bgcolor="#FF0000" id=demo2 valign=top></td>
</tr>
</table>
</div> </td>
     </tr>
   </table>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.οnmοuseοver=function() {clearInterval(MyMar)}
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
</script>

 

关键是让demo1和demo2在有效的长度范围内能接起来 就可以滚动了~

以上代码改几个数值和显示内容就可以直接复制使用了