因为需要做一个图片轮询的功能,于是写了个层的轮询,代码很简单。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Div Loop</TITLE>
</HEAD>
<BODY>
<div id=div_0 style="display:none">层1</div>
<div id=div_1 style="display:none">层2</div>
<div id=div_2 style="display:none">层3</div>
<div id=div_3 style="display:none">层4</div>
<div id=show_msg></div>
<div>
<a href="#" οnclick="clickShowMessage(0)">1</a> | <a href="#" οnclick="clickShowMessage(1)">2</a> |
<a href="#" οnclick="clickShowMessage(2)">3</a> | <a href="#" οnclick="clickShowMessage(3)">4</a> |
</div>
<script>
var playIndex = -1;
var countIndex = 4;
var objMsg = document.getElementById('show_msg');
//显示层信息
function showMessage(selectIndex){
var strVarName = 'div_'+selectIndex;
var objDiv = document.getElementById(strVarName);
objMsg.innerHTML = objDiv.innerHTML;
}
//轮询核心
function playMessage(){
if (playIndex >= (countIndex-1)){
playIndex = -1;
}
++playIndex;
showMessage(playIndex);
setTimeout(function(){playMessage()},5000);
}
//点击显示信息
function clickShowMessage(selectIndex){
showMessage(selectIndex);
playIndex = selectIndex;
}
playMessage();
</script>
</BODY>
</HTML>