javascript 图片上下循环滚动的问题！为什么不能实现循环呢？？？请指点！！
为什么下面这段代码不能使图片循环滚动呢？？？很不明白啊！！！<head><metahttp-equiv="Content-Type"content="text/html;...
为什么下面这段代码不能使图片循环滚动呢？？？很不明白啊！！！
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>auto1</title>
<style type="text/css">
.big{ width:500px;height:300px; position:absolute; top:130px;left:350px; background-color:#d5d5d5;}
#content{ width:320px; height:240px; border:1px solid #7575ff; position:relative; top:20px;left:90px; overflow:hidden;}
ul{ display:block; margin:0;padding:0; list-style:none;}
a{ display:block; margin:0; padding:0; float:left;}
img{ border:none;}
</style>
</head>
<body>
<div class="big">
<div id="content">
<div id="div1">
<ul>
<li>
<a href="#">
<img src="imgs1/h_tiny_3ijl_7a94000284d92f75.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_7mlf_209200033f6a2f75.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_9OuW_5fa00002b5842f76.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_bQ7K_7a88000158ba2f75.jpg" alt="#">
</a>
</li>
<li>
<a href="#">
<img src="imgs1/h_tiny_dNSm_1e5a000098ab2f75.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_Eg6r_563c0000a0e92f76.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_f8iz_719c00030f512f76.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_FoEq_1e290000a7932f75.jpg" alt="#">
</a>
</li>
<li>
<a href="#">
<img src="imgs1/h_tiny_kwcS_66b4000000012f75.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_IrNe_20910002f0bc2f75.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_KO3M_20a20002bd122f75.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_mQAo_35310003157b2f76.jpg" alt="#">
</a>
</li>
<li>
<a href="#">
<img src="imgs1/h_tiny_ZP8h_5e0900000f4e2f76.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_Z1IQ_6b00000000012f75.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_yRsN_56330000d92e2f76.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_WB0X_718b0006ca5a2f76.jpg" alt="#">
</a>
</li>
</ul>
</div>
<div id="div2"> </div>
</div>
</div>
<script type="text/javascript">
var content=document.getElementById("content");
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
div2.innerHTML=div1.innerHTML;
function auto(){
if (div1.scrollHeight <= content.scrollTop) {
content.scrollTop = 0;
}
else {
content.scrollTop++;
}
}
var timer=setInterval(auto,10);
</script>
</body>
</html>
十分不好意思啊，我目前没分给大家了，还请多多帮助！！谢啦！！ 展开
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>auto1</title>
<style type="text/css">
.big{ width:500px;height:300px; position:absolute; top:130px;left:350px; background-color:#d5d5d5;}
#content{ width:320px; height:240px; border:1px solid #7575ff; position:relative; top:20px;left:90px; overflow:hidden;}
ul{ display:block; margin:0;padding:0; list-style:none;}
a{ display:block; margin:0; padding:0; float:left;}
img{ border:none;}
</style>
</head>
<body>
<div class="big">
<div id="content">
<div id="div1">
<ul>
<li>
<a href="#">
<img src="imgs1/h_tiny_3ijl_7a94000284d92f75.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_7mlf_209200033f6a2f75.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_9OuW_5fa00002b5842f76.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_bQ7K_7a88000158ba2f75.jpg" alt="#">
</a>
</li>
<li>
<a href="#">
<img src="imgs1/h_tiny_dNSm_1e5a000098ab2f75.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_Eg6r_563c0000a0e92f76.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_f8iz_719c00030f512f76.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_FoEq_1e290000a7932f75.jpg" alt="#">
</a>
</li>
<li>
<a href="#">
<img src="imgs1/h_tiny_kwcS_66b4000000012f75.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_IrNe_20910002f0bc2f75.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_KO3M_20a20002bd122f75.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_mQAo_35310003157b2f76.jpg" alt="#">
</a>
</li>
<li>
<a href="#">
<img src="imgs1/h_tiny_ZP8h_5e0900000f4e2f76.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_Z1IQ_6b00000000012f75.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_yRsN_56330000d92e2f76.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_WB0X_718b0006ca5a2f76.jpg" alt="#">
</a>
</li>
</ul>
</div>
<div id="div2"> </div>
</div>
</div>
<script type="text/javascript">
var content=document.getElementById("content");
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
div2.innerHTML=div1.innerHTML;
function auto(){
if (div1.scrollHeight <= content.scrollTop) {
content.scrollTop = 0;
}
else {
content.scrollTop++;
}
}
var timer=setInterval(auto,10);
</script>
</body>
</html>
十分不好意思啊，我目前没分给大家了，还请多多帮助！！谢啦！！ 展开
展开全部
算了算了，不去纠结了。。用html代码加marquee属性就行啊，只是要滚动的地方marquee要写得一样，有点麻烦，不过代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>auto1</title>
<style type="text/css">
.big{ width:500px;height:300px; position:absolute; top:130px;left:350px; background-color:#d5d5d5;}
#content{ width:320px; height:240px; border:1px solid #7575ff; position:relative; top:20px;left:90px; overflow:hidden;}
ul{ display:block; margin:0;padding:0; list-style:none;}
a{ display:block; margin:0; padding:0; float:left;}
img{ border:none;}
</style>
</head>
<body>
<marquee direction="up" behavior="alternate"><div class="big">
<div id="content">
<marquee direction="up" behavior="alternate">
<div id="div1">
<ul>
<li>
<a href="#">
<img src="imgs1/h_tiny_3ijl_7a94000284d92f75.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_7mlf_209200033f6a2f75.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_9OuW_5fa00002b5842f76.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_bQ7K_7a88000158ba2f75.jpg" alt="#">
</a>
</li>
<li>
<a href="#">
<img src="imgs1/h_tiny_dNSm_1e5a000098ab2f75.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_Eg6r_563c0000a0e92f76.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_f8iz_719c00030f512f76.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_FoEq_1e290000a7932f75.jpg" alt="#">
</a>
</li>
<li>
<a href="#">
<img src="imgs1/h_tiny_kwcS_66b4000000012f75.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_IrNe_20910002f0bc2f75.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_KO3M_20a20002bd122f75.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_mQAo_35310003157b2f76.jpg" alt="#">
</a>
</li>
<li>
<a href="#">
<img src="imgs1/h_tiny_ZP8h_5e0900000f4e2f76.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_Z1IQ_6b00000000012f75.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_yRsN_56330000d92e2f76.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_WB0X_718b0006ca5a2f76.jpg" alt="#">
</a>
</li>
</ul>
</div>
</marquee>
<div id="div2"> </div>
</div>
</div>
</marquee>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>auto1</title>
<style type="text/css">
.big{ width:500px;height:300px; position:absolute; top:130px;left:350px; background-color:#d5d5d5;}
#content{ width:320px; height:240px; border:1px solid #7575ff; position:relative; top:20px;left:90px; overflow:hidden;}
ul{ display:block; margin:0;padding:0; list-style:none;}
a{ display:block; margin:0; padding:0; float:left;}
img{ border:none;}
</style>
</head>
<body>
<marquee direction="up" behavior="alternate"><div class="big">
<div id="content">
<marquee direction="up" behavior="alternate">
<div id="div1">
<ul>
<li>
<a href="#">
<img src="imgs1/h_tiny_3ijl_7a94000284d92f75.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_7mlf_209200033f6a2f75.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_9OuW_5fa00002b5842f76.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_bQ7K_7a88000158ba2f75.jpg" alt="#">
</a>
</li>
<li>
<a href="#">
<img src="imgs1/h_tiny_dNSm_1e5a000098ab2f75.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_Eg6r_563c0000a0e92f76.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_f8iz_719c00030f512f76.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_FoEq_1e290000a7932f75.jpg" alt="#">
</a>
</li>
<li>
<a href="#">
<img src="imgs1/h_tiny_kwcS_66b4000000012f75.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_IrNe_20910002f0bc2f75.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_KO3M_20a20002bd122f75.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_mQAo_35310003157b2f76.jpg" alt="#">
</a>
</li>
<li>
<a href="#">
<img src="imgs1/h_tiny_ZP8h_5e0900000f4e2f76.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_Z1IQ_6b00000000012f75.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_yRsN_56330000d92e2f76.jpg" alt="#">
</a>
<a href="#">
<img src="imgs1/h_tiny_WB0X_718b0006ca5a2f76.jpg" alt="#">
</a>
</li>
</ul>
</div>
</marquee>
<div id="div2"> </div>
</div>
</div>
</marquee>
</body>
</html>
追问
谢谢~~~
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
