样式:
#hdmain{ width:300px}
#t1{ background:#CCC; padding:5px}
#t2{ background:#F90; padding:5px; display:none}
#t3{ background:#090; padding:5px; display:none}
HTML代码:
<div id="hdmain">
<ul>
<li id="t1">111111</li>
<li id="t2">222222222222</li>
<li id="t3">333333333333333333</li>
</ul>
</div>
[<a href="#none" onclick="changeText(1)">1</a>]
[<a href="#none" onclick="changeText(2)">2</a>]
[<a href="#none" onclick="changeText(3)">3</a>]
[<a href="#none" onclick="play()"><span id="pp">停止</span></a>]
JS代码:
<script language="javascript">
var k=0;
var imgElem;
var tags=false;
function changeText(m){
if(m==0){
k+=1;
if(k>3){ k=1; }
}else{
k=m;
}
for(i=1;i<=3;i++)
{
if(k==i){
document.getElementById('t'+i).style.display='block';
continue;
}else {
document.getElementById('t'+i).style.display='none';
}
}
if(m==0){
var repeat="changeText('"+ m +"')";
imgElem = setTimeout(repeat,1000);
}else{
clearTimeout(imgElem);
}
}
function play(){
if(tags){
document.getElementById('pp').innerHTML='停止';
changeText(0);
tags=false;
}else{
document.getElementById('pp').innerHTML='播放';
changeText(1);
tags=true;
}
}
changeText(0);
</script>
下一篇:JS鼠标滑过放大浏览图片局部位置
讨论数量:0