<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{
margin:0px;
padding:0px;
list-style-type:none;
}
#wrap{
border:1px #CCC solid;
margin:50px auto;
width:650px;
padding:10px;
position:relative;
}
#nav li{
display:inline-block;
padding:10px 20px;
}
img{
width:600px;
height:400px;
border:1px solid #999;
}
.subnav{
position:absolute;
left:620px;
top:60px;
}
.subnav li{
height:50px;
}
</style>
<script type="text/javascript">
window.onload = function ()
{
var arrimg = ['img/5-1.jpg','img/5-2.jpg','img/5-3.jpg','img/5-4.jpg','img/5-5.jpg','img/5-6.jpg'];
var oimg = document.getElementsByTagName('img')[0];
var onav = document.getElementById('nav');
var oul = document.getElementsByTagName('ul');
arrli = [];
flag = 0;
num = 0;
timer = null;
for( var i = 1; i < oul.length; i++)
{
var ali = oul[i].getElementsByTagName('li');
for(var j = 0; j < ali.length; j++ )
{
arrli.push(ali[j]);
}
}
function clear()
{
for( var i = 0; i < arrli.length; i++ )
{
arrli[i].style.cssText = 'background:#eee;color:#000';
}
for( var i = 0; i< oul[0].getElementsByTagName('li').length; i++)
{
oul[0].getElementsByTagName('li')[i].style.cssText = 'background:blue;color:#fff';
}
};
function play()
{
clear();
arrli[num].style.cssText = 'background:pink;color:#fff';
oimg.src = arrimg[num];
if( flag == 0)
{
onav.getElementsByTagName('li')[0].style.cssText = 'background:pink; color:#fff';
oul[2].style.display = 'none';
oul[1].style.display = 'block';
num++;
if( num == arrli.length/2 )
flag = 1;
}
else
{
onav.getElementsByTagName('li')[1].style.cssText = 'background:pink; color:#fff';
oul[1].style.display = 'none';
oul[2].style.display = 'block';
num++;
if(num == arrli.length)
{
flag = 0;
num =0;
}
}
};
timer = setInterval(play,1000);
};
</script>
</head>
<body>
<div id="wrap">
<ul id="nav">
<li>菜单一</li>
<li>菜单二</li>
</ul>
<img src="img/loading.gif">
<ul class="subnav">
<li>图片1</li>
<li>图片2</li>
<li>图片3</li>
</ul>
<ul class="subnav" style="display:none;">
<li>图片4</li>
<li>图片5</li>
<li>图片6</li>
</ul>
</div>
</body>
</html>
