使用javascript实现的无缝滚动（跑马灯）
使用javascript实现的无缝滚动（跑马灯），小编在这里简单描述一下：内容一直滚动，鼠标经过的时候滚动就会暂停。
效果示例图：
实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>无缝滚动</title>
<style>
img{
width: 100px;
height: 50px;
}
#demo{
overflow: hidden;
width: 735px;
height: 165px
}
table{
}
</style>
</head>
<body>
<div id="demo" class="hdo gd_img">
<table cellpadding="0" align="left" border="0" cellspace="0">
<tbody>
<tr>
<td id="demo1" valign="top">
<table cellspacing="0" cellpadding="4" width="2150" border="0" id="tupian">
<tbody>
<tr>
<td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/1.jpg" /><br />小宁博客</a></td>
<td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/2.jpg" /><br />小宁博客</a></td>
<td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/3.jpg" /><br />小宁博客</a></td>
<td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/4.jpg" /><br />小宁博客</a></td>
<td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/1.jpg" /><br />小宁博客</a></td>
<td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/2.jpg" /><br />小宁博客</a></td>
<td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/3.jpg" /><br />小宁博客</a></td>
<td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/4.jpg" /><br />小宁博客</a></td>
<td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/1.jpg" /><br />小宁博客</a></td>
<td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/2.jpg" /><br />小宁博客</a></td>
<td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/3.jpg" /><br />小宁博客</a></td>
<td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/4.jpg" /><br />小宁博客</a></td>
<td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/1.jpg" /><br />小宁博客</a></td>
<td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/2.jpg" /><br />小宁博客</a></td>
<td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/3.jpg" /><br />小宁博客</a></td>
<td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/4.jpg" /><br />小宁博客</a></td>
</tr>
</tbody>
</table></td>
<td id="demo2" valign="top"></td>
</tr>
</tbody>
</table>
</div>
<script>
var speed1=25//速度数值越大速度越慢
document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML
function Marquee1(){
if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft<=0)
document.getElementById("demo").scrollLeft-=document.getElementById("demo1").offsetWidth
else{
document.getElementById("demo").scrollLeft++
}
}
var MyMar1=setInterval(Marquee1,speed1)
document.getElementById("demo").onmouseover=function () {clearInterval(MyMar1)}
document.getElementById("demo").onmouseout=function () {MyMar1=setInterval(Marquee1,speed1)}
</script>
</body>
</html>