JS实现=自动/停止/播放/上一条/下一条

Javascript 1369 0 2012-12-25

JS实现=自动/停止/播放/上一条/下一条

Style Code:
#hdmain{ width:300px}
#t1{ background:#CCC; padding:5px}
#t2{ background:#F90; padding:5px; display:none}
#t3{ background:#090; padding:5px; display:none}

Html Code:
<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="prev()">Prev</a>]&nbsp;&nbsp;
[<a href="#none" onclick="play()"><span id="pp">Stop</span></a>]&nbsp;&nbsp;
[<a href="#none" onclick="next()">Next</a>]

JS Code:
<script language="javascript">
/*===========================
(C) JAES 2009-10-19 ^_^
=============================*/
var k=0;
var imgElem;
var tags=false;
//主体函数
function changeText(m){
    if(m==0){ k+=1; }
else{ k=m; }

if(k>3 || k<1){ k=1; }

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);
}
}
//Play
function play(){
if(tags){
    document.getElementById('pp').innerHTML='Stop';
changeText(0);
tags=false;
}else{
    document.getElementById('pp').innerHTML='Play';
changeText(k);
tags=true;
}
}
//prev
function prev(){
k-=1;
if(k==0){ k=3; }
tags=true;
document.getElementById('pp').innerHTML='Play';
changeText(k); 
}
//next
function next(){
k+=1;
tags=true;
document.getElementById('pp').innerHTML='Play';
changeText(k);
}
//初始自动播放
changeText(0);
</script>

注:以上纯属个人自编,仅限编程爱好者交流,请勿用于商业。

上一篇:javascript的URL编码和解码

下一篇:JS简单自动播放/停止代码

讨论数量:0

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

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