经典无缝滚动,点击向左向右按钮还可以控制方向

<div id="demo" style="overflow:hidden;height:120px;width:600px;color:#ffffff">
<table align=left cellpadding=0 border=0><tr><td id="demo1" valign=top>
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td><img src=images/03.gif width=150 height=100></td>
<td><img src=images/03.gif width=150 height=100></td>
<td><img src=images/03.gif width=150 height=100></td>
<td><img src=images/03.gif width=150 height=100 ></td>
<td><img src=images/03.gif width=150 height=100></td>
</tr>
</table>
</td><td id="demo2" valign=top></td></tr></table></div>
<script language="javascript">
var LeftMyMar;
var MyMar;
var speed=30;
function  MarqueeLeft()
{
clearInterval(MyMar)
demo2.innerHTML=demo1.innerHTML
//向左走
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
LeftMyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(LeftMyMar)}
demo.onmouseout=function() {LeftMyMar=setInterval(Marquee,speed)}
}
MarqueeLeft();
function MarqueeRight()
{
clearInterval(LeftMyMar)
demo2.innerHTML=demo1.innerHTML
demo.scrollLeft=demo.scrollWidth
function Marquee(){
if(demo.scrollLeft<=0)
demo.scrollLeft+=demo2.offsetWidth
else{
demo.scrollLeft--
}
}
MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
}
</script>
<a href="#" onClick="MarqueeLeft()">向左</a> <a href="#" onClick="MarqueeRight()">向右</a>

文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志: