JavaScript 实现间歇自动滚动效果
作者:小圆点时间:2026-10-21 18:49:12浏览:454
本文通过一个完整的 HTML 示例,演示了如何使用 JavaScript 实现网页内容的间歇自动滚动效果。核心逻辑结合了 setInterval 定时器与自定义运动框架 move(),通过判断滚动高度是否超过容器阈值来重置位置,从而实现无缝循环滚动的视觉体验。
JavaScript 间歇滚动效果实现
本文通过一个具体的代码示例,详细讲解了如何利用 JavaScript 实现网页内容的间歇自动滚动效果。该方案旨在为开发者提供一个可直接参考的实现思路。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" charset="utf-8" />
<meta http-equiv="content-type" content="text/html" />
<title>demo</title>
</head>
<style type="text/css">
*{margin:0;padding:0;}
ul,li,img{margin:0;padding:0;border:0;list-style-type:none;}
#luanbo{border:1px solid red;overflow:hidden;height:24px;}
#info li{height:24px;line-height:24px;}
</style>
<body>
<div id="luanbo">
<ul id="info">
<li>aaaaaaaaaaa</li>
<li>bbbbbbbbbbb</li>
<li>ccccccccccc</li>
<li>ddddddddddd</li>
<li>eeeeeeeeeee</li>
<li>fffffffffff</li>
</ul>
</div>
<script type="text/javascript">
var odiv=document.getElementById("luanbo");
var oul=document.getElementById("info");
var oli=document.getElementById("info").getElementsByTagName("li");
var iNow=0;
function move(obj,tg){ //运动框架
clearInterval(dt);
var dt=setInterval(function(){
var speed=2;
if(tg-obj.scrollTop<speed){
tg=obj.scrollTop;
clearInterval(dt);
}else{
obj.scrollTop+=speed;
}
},30);
}
oul.innerHTML+=oul.innerHTML;
function star(){
clearInterval(tm);
var tm=setInterval(function(){
iNow++;
if(odiv.scrollTop>=(oli[0].offsetHeight*oli.length)/2){
odiv.scrollTop=0;
iNow=0;
}else{
var get=oli[0].offsetHeight*iNow;
move(odiv,get); //运动框架
}
},2000);
}
star();
</script>
</body>
</html>
如需进一步了解 JavaScript 相关的进阶技巧,可参考本站专题:《JavaScript运动效果与技巧汇总》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》。
希望上述关于 JavaScript 程序设计的具体实现方案,能为读者的实际开发工作提供有效的帮助。
作者最新文章
JS在setTimeout或Ajax回调中打开新标签页失败怎么处理
2026-11-05 15:50:12
JS直播协议选型:HLS、FLV与WebRTC的延迟与兼容性对比
2026-11-05 12:16:14
JS实现回到顶部:scrollTop赋值与浏览器兼容性处理
2026-11-04 23:43:35
JS使用classList动态添加、移除和切换CSS类名
2026-11-04 23:40:58
在 D3.js 中实现平滑过渡动画的技巧
2026-11-03 23:46:09
