本文介绍两种JavaScript实现自动循环滚动的方法。第一种利用setTimeout或setInterval配合DOM偏移量实现图片无缝滚动；第二种通过计算clientHeight与scrollHeight差值，利用setInterval定时修改scrollTop属性实现列表内容的自动循环滚动。
概述与技术要点
概述
实现图片的循环滚动功能，既能增强网页的动态视觉效果，又能有效节省页面空间，从而在有限的展示区域内呈现更多的图像内容。
技术要点
核心思路是应用setTimeout()方法来实现图片的循环滚动动画。setTimeout()方法的标准语法格式如下：
setTimeout（function,milliseconds,[arguments]） 参数说明：
a. function：指定需要调用的JavaScript自定义函数名称。
b. Milliseconds：设定超时时间，单位为毫秒。
功能描述：当设定的超时时间到达后，系统将调用指定的函数。该定时器可以通过clearTimeout()函数进行清除。
图片循环滚动具体实现
具体实现
（1）在页面适当位置插入一个id属性为demo的<div>元素，并在其中添加表格及需要滚动展示的图片。关键HTML代码如下：
<div id="demo" style=" overflow: hidden; width: 455px; height: 166px;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" id="marquePic1">
<!-- 要循环滚动的图片 -->
<table width="455" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr align="center">
<%for(int i=1;i<8;i++){%>
<td> <img src="Images/<%=i%>.jpg" width="118" height="166" border="1"> </td>
<%}%>
</tr>
</table>
</td>
<td id="marquePic2" width="1"></td>
</tr>
</table>
</div> （2）编写自定义的JavaScript函数move()，用于实现图片无间断的循环滚动效果。其中speed变量控制滚动速度，数值越大滚动越快。具体JavaScript代码如下：
<script language="javascript">
var speed=30 ; //设置间隔时间
marquePic2.innerHTML=marquePic1.innerHTML;
var demo=document.getElementById("demo"); //获取demo对象
function Marquee(n){ //实现图片循环滚动的方法
if(marquePic1.offsetWidth-demo.scrollLeft<=0){
demo.scrollLeft=0;
}
else{
demo.scrollLeft=demo.scrollLeft+n;
}
}
var MyMar=setInterval("Marquee(5)",speed);
demo.onmouseover=function() { //停止滚动
clearInterval(MyMar);
}
demo.onmouseout=function() { //继续滚动
MyMar=setInterval("Marquee(5)",speed);
}
</script>列表自动循环滚动原理与代码
知识点补充：使用JavaScript实现页面的自动循环滚动
首先编写HTML代码结构
<div id="content">
<ol id="EG-CN-1">EG-CN-1
<li type="none">aatox</li>
<li type="none">akari</li></ol>
<ol id="EG-CN-10">EG-CN-10<li type="none">rakan</li></ol>
<ol id="EG-CN-7">EG-CN-7<li type="none">riven</li>
<li type="none">darius</li></ol>
<ol id="EG-CN-8">EG-CN-8<li type="none">fiora</li>
<li type="none">jayce</li>
<li type="none">noc</li></ol>
<ol id="EG-CN-2">EG-CN-2<li type="none">leesin</li></ol></div>这是一个通过JS自动添加列表项的div容器，随着名单长度增加会自动扩展scrollheight，而整个div容器保持固定的宽高，通过CSS的overflow：scroll属性将超出内容隐藏在滚动视图中。CSS代码如下，此处同时使用：：-webkit-scrollbar 来隐藏滚动条以保持界面美观。
#content{
width:430px;height:490px;
position:absolute; top:180px;left:40%;
font-size:20px;overflow:scroll;
}
#content::-webkit-scrollbar{display:none}
ol{font-size:35px}
li{font-size:25px}接下来编写实现自动循环滚动的JavaScript代码逻辑。
其原理是首先读取div元素的高度以及div内部内容的总高度，即clientHeight和scrollHeight属性，以此确定滚动条到达顶部的最大距离h=clientHeight-scrollHeight。随后，通过setInterval定时器使滚动条距顶部的距离scrollTop属性从0开始递增，直至达到最大距离h，之后将scrollTop重置为零，从而重新开始滚动过程。
$(document).ready(function(){
content=document.getElementById('content')
clientheight=content.clientHeight
offsetheight=content.scrollHeight
h=offsetheight-clientheight
var position=0
function startscroll(){
if(content.scrollTop<h){position++;content.scrollTop=position}
if(content.scrollTop>=h){content.scrollTop=0;position=0}
}
setInterval(startscroll,100)
console.log(clientheight)
console.log(offsetheight)
})总结
以上介绍了JavaScript代码实现图片及列表循环滚动效果的相关知识，希望对大家有所帮助。如有任何疑问，欢迎留言，小编会及时回复。在此非常感谢大家对本站网站的支持！