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>]
[<a href="#none" onclick="play()"><span id="pp">Stop</span></a>]
[<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>
注:以上纯属个人自编,仅限编程爱好者交流,请勿用于商业。
下一篇:JS简单自动播放/停止代码
讨论数量:0