我想在特定的位置实现图片从下至上的循环滚动，从网上找了一段代码，讲javascript和html的代码分开了
第9行老是报demo2为空或不是对象的错，求各位路过的大侠帮个忙，小弟万分感激<html><head><title>无缝垂直图片滚动</title><scripttype...
第9行老是报demo2为空或不是对象的错，求各位路过的大侠帮个忙，小弟万分感激
<html>
<head>
<title>无缝垂直图片滚动</title>
<script type="text/javascript">
var demo=document.getElementById("demo");
var demo1=document.getElementById("demo1");
var demo2=document.getElementById("demo2");
var speed=30;
demo2.innerHTML=demo1.innerHTML;
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight;
else{
demo.scrollTop++;
}
}
var MyMar=setInterval(Marquee,speed);
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
</script>
</head>
<body onload="Marquee()">
<div id=demo style=overflow:hidden;height:100;width:180;>
<div id=demo1>
<img src="1.gif" onclick="javascript:window.open(this.src);">
<img src="2.gif" onclick="javascript:window.open(this.src);">
</div> <div id=demo2></div> </div> </body></html> 展开
<html>
<head>
<title>无缝垂直图片滚动</title>
<script type="text/javascript">
var demo=document.getElementById("demo");
var demo1=document.getElementById("demo1");
var demo2=document.getElementById("demo2");
var speed=30;
demo2.innerHTML=demo1.innerHTML;
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight;
else{
demo.scrollTop++;
}
}
var MyMar=setInterval(Marquee,speed);
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
</script>
</head>
<body onload="Marquee()">
<div id=demo style=overflow:hidden;height:100;width:180;>
<div id=demo1>
<img src="1.gif" onclick="javascript:window.open(this.src);">
<img src="2.gif" onclick="javascript:window.open(this.src);">
</div> <div id=demo2></div> </div> </body></html> 展开
3个回答
展开全部
script放在div后
<div id=demo style=overflow:hidden;height:100;width:180;>
<div id=demo1>
<img src="1.gif" onclick="javascript:window.open(this.src);">
<img src="2.gif" onclick="javascript:window.open(this.src);">
</div> <div id=demo2></div> </div>
<script type="text/javascript">
var demo=document.getElementById("demo");
var demo1=document.getElementById("demo1");
var demo2=document.getElementById("demo2");
var speed=30;
demo2.innerHTML=demo1.innerHTML;
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight;
else{
demo.scrollTop++;
}
}
var MyMar=setInterval(Marquee,speed);
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
</script>
<div id=demo style=overflow:hidden;height:100;width:180;>
<div id=demo1>
<img src="1.gif" onclick="javascript:window.open(this.src);">
<img src="2.gif" onclick="javascript:window.open(this.src);">
</div> <div id=demo2></div> </div>
<script type="text/javascript">
var demo=document.getElementById("demo");
var demo1=document.getElementById("demo1");
var demo2=document.getElementById("demo2");
var speed=30;
demo2.innerHTML=demo1.innerHTML;
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight;
else{
demo.scrollTop++;
}
}
var MyMar=setInterval(Marquee,speed);
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
代码毛病太多了，我只是让它动起来了，图片之间也有缝隙，到底端还会向下走，这些东西你自己改吧。
<html>
<head>
<title>无缝垂直图片滚动</title>
</head>
<body onload="Marquee()">
//这里一定要加上position: absolute;否则不会动
<div id="demo" style="overflow: hidden; position: absolute; height: 100; width: 180;">
<div id="demo1">
//以下是我自己的两个图片，你可以更换
<img width="100" height="100" src="L.jpg" onclick="javascript:window.open(this.src);">
<img width="100" height="100" src="LL.jpg" onclick="javascript:window.open(this.src);">
</div>
<div id="demo2">
</div>
</div>
<script type="text/javascript">
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
var speed = 30;
demo2.innerHTML = demo1.innerHTML;
function Marquee() {
if (demo2.offsetTop - demo.scrollTop <= 0)
//这里offsetTop是只读的，必须用style.top
demo.style.top -= demo1.offsetHeight;
else {
var oldValue = demo.style.top;
//因为首次运动时，demo的top属性为空，所以必须判断。且top的值为字符串，如"120px"
demo.style.top = oldValue == "" ? "0px" : (parseInt(oldValue.substring(0, oldValue.length - 2)) + 1) + "px";
}
}
var MyMar = setInterval(Marquee, speed);
demo.onmouseover = function () { clearInterval(MyMar) }
demo.onmouseout = function () { MyMar = setInterval(Marquee, speed) }
</script>
</body>
</html>
<html>
<head>
<title>无缝垂直图片滚动</title>
</head>
<body onload="Marquee()">
//这里一定要加上position: absolute;否则不会动
<div id="demo" style="overflow: hidden; position: absolute; height: 100; width: 180;">
<div id="demo1">
//以下是我自己的两个图片，你可以更换
<img width="100" height="100" src="L.jpg" onclick="javascript:window.open(this.src);">
<img width="100" height="100" src="LL.jpg" onclick="javascript:window.open(this.src);">
</div>
<div id="demo2">
</div>
</div>
<script type="text/javascript">
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
var speed = 30;
demo2.innerHTML = demo1.innerHTML;
function Marquee() {
if (demo2.offsetTop - demo.scrollTop <= 0)
//这里offsetTop是只读的，必须用style.top
demo.style.top -= demo1.offsetHeight;
else {
var oldValue = demo.style.top;
//因为首次运动时，demo的top属性为空，所以必须判断。且top的值为字符串，如"120px"
demo.style.top = oldValue == "" ? "0px" : (parseInt(oldValue.substring(0, oldValue.length - 2)) + 1) + "px";
}
}
var MyMar = setInterval(Marquee, speed);
demo.onmouseover = function () { clearInterval(MyMar) }
demo.onmouseout = function () { MyMar = setInterval(Marquee, speed) }
</script>
</body>
</html>
追问
呵呵，对与js我完全是个菜鸟，就这几天才接触的，我就想实现在某个特定的区域内实现图片的循环滚动，中间无缝，如果加上position: absolute就成了绝对布局了吧。。不是我想要的效果 谢谢！
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<div id="Demo_t0" style="overflow:hidden;width:930;height:160;">
<table width=" 0" height="136" border=0 align=center cellpadding=0 cellspacing="0" cellspace=0>
<tr>
<td align="center" valign=top id=Demo_t1><table width=" 0" height="136" border=0 align=left cellpadding=0 cellspacing="0" cellspace=0>
<tr>
<td width=" 0" align="center" valign="middle">滚动内容</td>
</tr>
</table></td>
<td width="1" valign=top id=Demo_t2></td>
</tr>
</table>
</div>
<script language="javascript">
var Demo_speed=30
Demo_t2.innerHTML=Demo_t1.innerHTML
function Demo_Marquee(){
if(Demo_t2.offsetWidth-Demo_t0.scrollLeft<=0)
Demo_t0.scrollLeft-=Demo_t1.offsetWidth
else{
Demo_t0.scrollLeft++
}
}
var Demo_MyMar=setInterval(Demo_Marquee,Demo_speed)
Demo_t0.onmouseover=function()
Demo_t0.onmouseout=function()
</script>
肯定能有 我做网站时就是用的这个代码
width:930;height:160 两个数值是滚动范围的宽和长
然后可以将图片的路径代码直接替换 上面代码中“滚动内容”就可以了
<table width=" 0" height="136" border=0 align=center cellpadding=0 cellspacing="0" cellspace=0>
<tr>
<td align="center" valign=top id=Demo_t1><table width=" 0" height="136" border=0 align=left cellpadding=0 cellspacing="0" cellspace=0>
<tr>
<td width=" 0" align="center" valign="middle">滚动内容</td>
</tr>
</table></td>
<td width="1" valign=top id=Demo_t2></td>
</tr>
</table>
</div>
<script language="javascript">
var Demo_speed=30
Demo_t2.innerHTML=Demo_t1.innerHTML
function Demo_Marquee(){
if(Demo_t2.offsetWidth-Demo_t0.scrollLeft<=0)
Demo_t0.scrollLeft-=Demo_t1.offsetWidth
else{
Demo_t0.scrollLeft++
}
}
var Demo_MyMar=setInterval(Demo_Marquee,Demo_speed)
Demo_t0.onmouseover=function()
Demo_t0.onmouseout=function()
</script>
肯定能有 我做网站时就是用的这个代码
width:930;height:160 两个数值是滚动范围的宽和长
然后可以将图片的路径代码直接替换 上面代码中“滚动内容”就可以了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
