滚动显示。。。。。JavaScript

最新推荐文章于 2025-08-12 14:37:12 发布

zhang195617

最新推荐文章于 2025-08-12 14:37:12 发布

阅读量334

点赞数

文章标签： javascript 网络 delay function scroll string

本文介绍了一种使用JavaScript实现的网页中列表自动滚动的效果。通过设置特定的时间间隔和滚动速度，可以使列表内的项目进行循环滚动显示，增强了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<style type= "text/css" >
ul,li{margin:0 ;padding: 0 ;font-size:12px;color:# 999 ;}
ul{height:100px;overflow:hidden;}
ul li{line-height:20px;height:20px;}
</style>
</head>
<body>
<ul id="list" >
<li>“卧槽泥马”：又一网络新词1 </li>
<li>“卧槽泥马”：又一网络新词2 </li>
<li>“卧槽泥马”：又一网络新词3 </li>
<li>“卧槽泥马”：又一网络新词4 </li>
<li>“卧槽泥马”：又一网络新词5 </li>
<li>“卧槽泥马”：又一网络新词6 </li>
<li>“卧槽泥马”：又一网络新词7 </li>
<li>“卧槽泥马”：又一网络新词8 </li>
<li>“卧槽泥马”：又一网络新词9 </li>
<li>“卧槽泥马”：又一网络新词10 </li>
<li>“卧槽泥马”：又一网络新词11 </li>
<li>“卧槽泥马”：又一网络新词12 </li>
<li>“卧槽泥马”：又一网络新词13 </li>
<li>“卧槽泥马”：又一网络新词14 </li>
</ul>
<script type="text/javascript" >
function scroll(element, delay, speed, lineHeight) {
var numpergroup = 5 ;
var slideBox = (typeof element == 'string' )?document.getElementById(element):element;
var delay = delay||1000 ;
var speed=speed||20 ;
var lineHeight = lineHeight||20 ;
var tid = null , pause = false ;
var liLength = slideBox.getElementsByTagName('li' ).length;
var lack = numpergroup-liLength%numpergroup;
for (i= 0 ;i<lack;i++){
slideBox.appendChild(document.createElement("li" ));
}
var start = function() {
tid=setInterval(slide, speed);
}
var slide = function() {
if (pause) return ;
slideBox.scrollTop += 2 ;
if ( slideBox.scrollTop % lineHeight == 0 ) {
clearInterval(tid);
for (i= 0 ;i<numpergroup;i++){
slideBox.appendChild(slideBox.getElementsByTagName('li' )[ 0 ]);
}
slideBox.scrollTop = 0 ;
setTimeout(start, delay);
}
}
slideBox.onmouseover=function(){pause=true ;}
slideBox.onmouseout=function(){pause=false ;}
setTimeout(start, delay);
}
scroll('list' , 5000 , 1 , 20 ); //停留时间，相对速度（越小越快）,每次滚动多少，最好和Li的Line-height一致。
</script>