需要两个定时器：第一个定时器用来控制每四秒开启第二个定时器
第二个定时器作用：通过控制div的运动，实现百叶窗的效果，也即每100毫秒让一个div向上或向下运动一定的距离，当最后一个div运动完之后，关闭第二个定时器
具体实现看下面的代码
HTML代码
<ul id="ul1">
<li>
<div>
<p>aaaaaaaaa</p>
<p>bbbbbbbbb</p>
</div>
</li>
<li>
<div>
<p>cccccccc</p>
<p>dddddddd</p>
</div>
</li>
<li>
<div>
<p>eeeeeeee</p>
<p>ffffffff</p>
</div>
</li>
<li>
<div>
<p>gggggggg</p>
<p>hhhhhhhh</p>
</div>
</li>
<li>
<div>
<p>iiiiiiii</p>
<p>jjjjjjjj</p>
</div>
</li>
<li>
<div>
<p>kkkkkkkk</p>
<p>llllllll</p>
</div>
</li>
</ul>css代码
<style>
*{margin:0; padding:0;}
li{list-style:none;}
#ul1{width:300px; height:auto;border-top:1px solid #000; margin:20px;}
li{width:100%; line-height:30px; border-bottom:1px #333 dashed; overflow:hidden; position:relative; height:30px;}
div{position:absolute; top:-30px;}
div p{height:30px;}
</style>js代码
首先我们需要用到一个运动的框架，框架我之前已经写过，如果有兴趣的请点击运动框架
<script type="text/javascript" src="move.js"></script><script>
window.onload = function(){
var oUl = document.getElementById('ul1');
toShow(oUl);
function toShow(obj){
var aDiv = obj.getElementsByTagName('div');
var iNow =0;
var iTimer = null;
var iBtn = true;//设置开关，通过开关决定是div是向下移动还是向上移动
setInterval(function(){
toChange();
},4000);//开启第一个定时器，让这个百叶窗效果每四秒运动一次
function toChange(){
iTimer = setInterval(function(){//设置第二个定时器，即从第一个到最后一个div每100毫秒运动一个，最后一个运动完成之后关闭这个定时器
if(iNow==aDiv.length){
clearInterval(iTimer);
iNow = 0;
iBtn = !iBtn;
}else{
startMove(aDiv[iNow],{top:iBtn?0:-30});//使用运动框架，让div运动起来
iNow++;
}
},100);
}
}
}
</script>
