就是网上常见的那种循环上下左右滚动效果，想自己写一个，虽然知道可能会用到的技术，但无法组合起来实现效果。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style type="text/css">
html,body,div,ul,li{ margin:0; padding:0; list-style:none; }
body{ padding:2em; }
#lists{ margin:0 auto; border:1px solid #aaa; width:200px; height:40px; line-height:40px; text-align:center; overflow:hidden; }
#lists li{ height:40px; }
</style>
</head>
<body>
<div id="box">
<ul id="lists">
<li>apple</li>
<li>adobe</li>
<li>google</li>
</ul>
</div>
<script type="text/javascript">
/*想自己写一个可以循环滚动效果，可能用到setInterval/setTimeout,scrollTop*/
var obj=document.getElementById("lists");
var objLh=obj.clientHeight; /*clientHeight=40*/
var objSt=obj.scrollTop; /*默认是0*/
/*obj每隔一段时间就向上滚动到一个位置（比如40，40×2=80，40×3=120，因为obj有3个子元素，当第1阶段滚动结束后重新开始滚动）*/
</script>
</body>
</html>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style type="text/css">
html,body,div,ul,li{ margin:0; padding:0; list-style:none; }
body{ padding:2em; }
#lists{ margin:0 auto; border:1px solid #aaa; width:200px; height:40px; line-height:40px; text-align:center; overflow:hidden; }
#lists li{ height:40px; }
</style>
</head>
<body>
<div id="box">
<ul id="lists">
<li>apple</li>
<li>adobe</li>
<li>google</li>
</ul>
</div>
<script type="text/javascript">
/*想自己写一个可以循环滚动效果，可能用到setInterval/setTimeout,scrollTop*/
var obj=document.getElementById("lists");
var objLh=obj.clientHeight; /*clientHeight=40*/
var objSt=obj.scrollTop; /*默认是0*/
/*obj每隔一段时间就向上滚动到一个位置（比如40，40×2=80，40×3=120，因为obj有3个子元素，当第1阶段滚动结束后重新开始滚动）*/
</script>
</body>
</html>
1、原理：用时间定时函数将宽度或者高度逐渐向一个方向移动，并且用一定的算法来计算移动速度 2、技术：一个setInterval足矣
我最初的想法是判断obj.scrollTop是否到了40，40×2=80，40×3=120这个3个位置，但判断条件不知道怎么写好，并且是类似第1秒obj.scrollTip移动到40,第2秒obj.scrollTip移动到80,第3秒obj.scrollTip移动到120，当obj.scrollTip大于120这个位置时，在继续循环以上动作。