两套滚动图片效果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的方法 我也不多说了 调用数据图片的方法 是我之前发表的欢灯片的方法是一样的
<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
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读:74
-
如何安装mysql8.0
阅读:31
-
Word快速设置标题样式步骤详解
阅读:28
-
20+道必知必会的Vue面试题(附答案解析)
阅读:37
-
HTML如何制作表单
阅读:22
-
百词斩可以改天数吗?当然可以,4个步骤轻松修改天数!
阅读:31
-
ET文件格式和XLS格式文件之间如何转化?
阅读:24
-
react和vue的区别及优缺点是什么
阅读:121
-
支付宝人脸识别如何关闭?
阅读:21
-
腾讯微云怎么修改照片或视频备份路径?
阅读:28