<!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; 650px; padding:10px; position:relative; } #nav li{ display:inline-block; padding:10px 20px; } img{ 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>