JS简单自动播放/停止代码

Javascript 2039 0 2012-12-25

JS简单自动播放/停止代码

样式:
#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>]&nbsp;&nbsp;
[<a href="#none" onclick="changeText(2)">2</a>]&nbsp;&nbsp;
[<a href="#none" onclick="changeText(3)">3</a>]&nbsp;&nbsp;
[<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实现=自动/停止/播放/上一条/下一条

下一篇:JS鼠标滑过放大浏览图片局部位置

讨论数量:0

请先登录再发表讨论。 2024-05-04

天涯网魂
3 杠 5 星
TA 的文章
TA 的随言
TA 的资源链