js原生实现 无缝滚动图片

<!-- 无缝滚动图片开始 -->
<div id=demopic style="OVERFLOW: hidden; WIDTH: 100%; COLOR: #fff; HEIGHT: 170px">
<table width="100%" border=0 align=center cellpadding=0 cellspacing="0" cellspace="0">
<tr>
<td valign=top id=demopic1><table width="100%" border="0" cellspacing="10" cellpadding="0">
<tr>
<td align="center"><a href="" target=_blank><img src="./images/W001.jpg" width="110" height="150" border="0" alt="法治新闻传播" /></a></td>

<td align="center"><a href="" target=_blank><img src="./images/W002.jpg" width="110" height="150" border="0" alt="人民检察" /></a></td>

<td align="center"><a href="" target=_blank><img src="./images/W003.jpg" width="110" height="150" border="0" alt="最高人民检察院影视中心" /></a></td>

<td align="center"><a href="" target=_blank><img src="./images/W004.png" width="110" height="150" border="0" alt="政法网络舆情" /></a></td>

<td align="center"><a href="" target=_blank><img src="./images/W005.jpg" width="110" height="150" border="0" alt="人民监督" /></a></td>

<td align="center"><a href="" target=_blank><img src="./images/W006.jpg" width="110" height="150" border="0" alt="方圆律政" /></a></td>

<td align="center"><a href="" target=_blank><img src="./images/W007.jpg" width="110" height="150" border="0" alt="方圆" /></a></td>
</tr>
</table></td>
<td width="12" valign=top id=demopic2></td>
</tr>
</table>
</div>


<script>
var speed=15
demopic2.innerHTML=demopic1.innerHTML
function Marquee()
{ if(demopic2.offsetWidth-demopic.scrollLeft<=0)
demopic.scrollLeft-=demopic1.offsetWidth
else{
demopic.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)

demopic.onmouseover=function() {
clearInterval(MyMar)
}

demopic.onmouseout=function() {
MyMar=setInterval(Marquee,speed)
}
</script>

<!-- 无缝滚动图片结束 -->

转载于:https://www.cnblogs.com/yzryc/p/6046414.html