<div class="d">
<div class="img"></div>
<div class="mask"></div>
<div class="play"></div>
</div>
<div class="cont">
<div>钢琴</div>
<span href="#">July - My Soul</span>
</div>
</li>
<li class="l8" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
<div class="d">
<div class="img"></div>
<div class="mask"></div>
<div class="play"></div>
</div>
<div class="cont">
<div>KTV必点</div>
<span href="#">蔡健雅 - 无底洞</span>
</div>
</li>
<li class="l9" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
<div class="d">
<div class="img"></div>
<div class="mask"></div>
<div class="play"></div>
</div>
<div class="cont">
<div>思念</div>
<span href="#">张杰 - 这就是爱</span>
</div>
</li>
<li class="ll" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
<div class="d">
<div class="img"></div>
<div class="mask"></div>
<div class="play"></div>
</div>
<div class="cont">
<div>DJ外文舞曲</div>
<span href="#">Jean Cloud Ades</span>
</div>
</li>
</ul>
<script>
var ul = document.getElementById('frm');
var li = document.getElementsByTagName('li');
var spans;
for(var i=0;i<li.length;i++){
spans = li[i].getElementsByTagName('span');
li[i].span_obj = spans[0];
}
var index = -1;
function showup(){
if(li[index].span_obj.style.top == ''){
li[index].span_obj.style.top = '13px';
}
if(parseInt(li[index].span_obj.style.top)<=0){
li[index].span_obj.style.top = '';
setTimeout('shownext()',1000);
}else{
li[index].span_obj.style.top = parseInt(li[index].span_obj.style.top)-1 +'px';
setTimeout('showup()',100);
}
}
function shownext(){
index++;
index = index%li.length;
showup();
}
setTimeout(shownext,1000);
</script>
</body>
</html>
生成效果：
代码分析：
1.ul标签内部含有10个li标签，因为每个li标签的图标为不同的子图片，所以给每个li标签里添加不同的class属性。
