                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /信息滚动效果制作

请教大神，我的这个怎么没滚动呢

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<style type="text/css">
*{margin:0;padding:0;}
#odiv{width:300px;border:1px solid #000;background:#d8bfd8;}
h3{height:50px;line-height:50px;text-align: center;border:1px solid #000;color:white;}
#div1{overflow: hidden; height:150px;border:1px solid #000;}
ul{width:200px;margin:0 50px 0 50px;}
li{list-style: none;}
a{text-decoration: none;color:white;}

</style>

</head>
<body>
<script type="text/javascript">
window.onload=function(){
var area=document.getElementById('div1');
var con1=document.getElementById('con1');
var con2=document.getElementById('con2');
var speed=50;

   con2.innerHTML=con1.innerHTML;
function scroll(){
  if(area.scrollTop>=con1.scrollHeight)
  {
  area.scrollTop=0;
}
else{
  area.scrollTop++;
}
}
var myscorll=setInterval("scroll()",speed);
}

</script>
<div id="odiv">
<h3>亚洲新歌榜实时趋势</h3>
<div id="div1">
<ul id="con1">
  <li><a href="#" >1.玫瑰与小鹿----周深</a></li><br>
  <li><a href="#" >2.蜉蝣----华晨宇</a></li><br>
  <li><a href="#" >3.大梦想家----TFBOYS</a></li><br>
  <li><a href="#" >4.Rims----欧豪</a></li><br>
  <li><a href="#" >5.银河----汪苏泷</a></li><br>
  <li><a href="#" >6.创作者----本兮</a></li><br>
  <li><a href="#" >7.做你的Gentleman----张阳阳</a></li><br>
  <li><a href="#" >7.做你的Gentleman----张阳阳</a></li><br>
  <li><a href="#" >7.做你的Gentleman----张阳阳</a></li><br>
  <li><a href="#" >7.做你的Gentleman----张阳阳</a></li><br>
  <li><a href="#" >7.做你的Gentleman----张阳阳</a></li><br>
  </ul>
  <ul id="con2"></ul>
</div>
</div>
</body>
</html>

QAQQQQ

2015-09-10

源自：信息滚动效果制作 2-2

关注问题我要回答

897

操作

收起

2 回答

hey自然
2015-09-11

if(area.scrollTop>=con1.scrollHeight), 首先这里，你可以自己去alert一下con1.scrollHeight. 初始值是为0的。所以这个判断就不成立，应该是滚动的高度值>=con1自身的高度的时候再重新将scrollTop置0，所以应该是 if(area.scrollTop>=con1.offsetHeight);

最后就是 var myscorll=setInterval("scroll()",speed); setInterval 里去引用这个函数，有两种引用scroll这个函数的方法，你这种在慕课里讲是对的，但是奇怪我chromeF12后一直在报错。所以我直接setInterval(scroll,speed)这样。然后完美运转。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>无缝滚动</title> 
 <style type="text/css">
*{margin:0;padding:0;}
#odiv{width:300px;border:1px solid #000;background:#d8bfd8;}
h3{height:50px;line-height:50px;text-align: center;border:1px solid #000;color:white;}

#div1{overflow: hidden; height:150px;border:1px solid #000;}

ul{width:200px;margin:0 50px 0 50px;}
li{list-style: none;}
a{text-decoration: none;color:white;}

 </style>
 
</head>
<body>
<script type="text/javascript">

  window.onload=function(){
   var area=document.getElementById('div1');
   var con1=document.getElementById('con1');
   var con2=document.getElementById('con2');
   var speed=50;
    
   con2.innerHTML=con1.innerHTML;


function scroll(){
  if(area.scrollTop >= con1.offsetHeight){
     area.scrollTop=0;
  }else{
    area.scrollTop++
  }
}

  var myscorll=setInterval(scroll,speed);
 
 }
 
 </script>
 <div id="odiv">
 <h3>亚洲新歌榜实时趋势</h3>
 <div id="div1">
 <ul id="con1">
  <li><a href="#" >1.玫瑰与小鹿----周深</a></li><br>
  <li><a href="#" >2.蜉蝣----华晨宇</a></li><br>
  <li><a href="#" >3.大梦想家----TFBOYS</a></li><br>
  <li><a href="#" >4.Rims----欧豪</a></li><br>
  <li><a href="#" >5.银河----汪苏泷</a></li><br>
  <li><a href="#" >6.创作者----本兮</a></li><br>
  <li><a href="#" >7.做你的Gentleman----张阳阳</a></li><br>
  <li><a href="#" >7.做你的Gentleman----张阳阳</a></li><br>
  <li><a href="#" >7.做你的Gentleman----张阳阳</a></li><br>
  <li><a href="#" >7.做你的Gentleman----张阳阳</a></li><br>
  <li><a href="#" >7.做你的Gentleman----张阳阳</a></li><br>
  </ul>
  <ul id="con2"></ul>
 </div>
 </div>
</body>
</html>