+ -
当前位置:首页 → 问答吧 → 两套滚动图片效果JS代码 BY 觉恋

两套滚动图片效果JS代码 BY 觉恋

时间:2008-10-04

来源:互联网

<!--第一个图片滚动开始-->
<table width=\"100%\" border=\"0\" cellspacing=\"1\" cellpadding=\"0\" >
<tr>
<td >
<div id=\"demo\" style=\"overflow: hidden; width: 460px; height:100px\" >
<table cellpadding=\"0\" align=\"left\" border=\"0\" cellspace=\"0\">
<tr>
<td id=\"demo1\" valign=\"top\"><table cellspacing=\"0\" cellpadding=\"0\" width=\"460\" border=\"0\">
<tr align=\"center\"><td>
<img src=/pinpai/10.gif><img src=/pinpai/10.gif><img src=http://u.heima8.com/ads/20044/img/280x260x01.gif>
</td>


</tr>
</table></td>
<td id=\"demo2\" valign=\"top\"></td>
</tr>
</table>
</div>
<script type=\"text/javascript\" language=\"JavaScript\">
//调用向左滚动
toleft(\"demo\",\"demo1\",\"demo2\",30,\"hehe123\")

function $(id){return document.getElementById(id)}
//向左滚动函数,demo包含demo1与demo2,speed是滚动速度,flag一个网页内有多个时设置为不同的任意字符。
function toleft(demo,demo1,demo2,speed,flag){
demo=$(demo);demo1=$(demo1);demo2=$(demo2)
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0){
demo.scrollLeft-=demo1.offsetWidth
}
else{
demo.scrollLeft++
}
}
flag=setInterval(Marquee,speed)
demo.onmouseover=function(){clearInterval(flag);}
demo.onmouseout=function(){flag=setInterval(Marquee,speed);}
}

</script>
</td>
</tr>
</table>

<!--第一个图片滚动结束-->

<!--第二个图片滚动开始-->

<div id=demos style=\"overflow:hidden; width:128px; height:300px;\">
<div id=demos1>
<img src=\"http://www.1loveqq.cn/logo.gif\" width=\"85\">
<img src=\"http://www.1loveqq.cn/logo.gif\" width=\"85\">
<img src=\"http://www.1loveqq.cn/logo.gif\" width=\"85\">
<img src=\"http://www.1loveqq.cn/logo.gif\" width=\"85\">
<img src=\"http://www.scku8.cn/logo.gif\" width=\"85\">
<img src=\"http://www.scku8.cn/logo.gif\" width=\"85\">
<img src=\"http://www.scku8.cn/logo.gif\" width=\"85\">
<img src=\"http://www.scku8.cn/logo.gif\" width=\"85\">
</div>
<div id=demos2></div>
</div>
<script language=\"javascript\">
var speed=30
demos2.innerHTML=demos1.innerHTML
function Marquee(){
if(demos2.offsetTop-demos.scrollTop<=0)
demos.scrollTop-=demos1.offsetHeight
else{
demos.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
demos.onmouseover=function() {clearInterval(MyMar)}
demos.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>


<!--第二个图片滚动结束-->




建立个JS文件 调用JS的方法 我也不多说了 调用数据图片的方法 是我之前发表的欢灯片的方法是一样的

作者: 居士   发布时间: 2008-10-04