这个想了有一段时间，开始没绕过那个坎，最后想通了，哇，成功的那一刻，真是太舒适了. 贴代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> a{ text-decoration: none; color: black; } li{ display: inline-block; border: 1px gray solid; float: left; padding: 5px; padding-left: 17px; padding-right: 17px; font-family: "微软雅黑"; border-bottom: none; background-color: aliceblue; } img{ float: left; position: absolute; left: 48px; top:50px ; } p{ position: absolute; left: 165px; top: 280px; } </style> </head> <body> <ul> <span><li><a href="#" onclick="aa(0)">热点</a></li></span> <span><li><a href="#" onclick="aa(1)">聚焦</a></li></span> <span><li><a href="#" onclick="aa(2)">天下</a></li></span> <span><li><a href="#" onclick="aa(3)">奇闻</a></li></span> <span><li><a href="#" onclick="aa(4)">军事</a></li></span> <div id="a1"> <img src="img/1.jpg"/> <p>法国大选</p> </div> <div id="a2"> <img src="img/2.jpg"/> <p>121</p> </div> <div id="a3"> <img src="img/3.jpg"/> <p>123123123</p> </div> <div id="a4"> <img src="img/4.jpg"/> <p>12312312312</p> </div> <div id="a5"> <img src="img/5.jpg"/> <p>213123123</p> </div> </ul> <script type="text/javascript"> var a=document.getElementsByTagName("div"); for(i=1;i<a.length;i++) a[i].style.display="none";//这个让开始的时候只显示第一张图片，楼主这里不用onload了. var w=0; function aa() { for(i=0;i<5;i++) { a[i].style.display="none"; }//让所有图片消失，便于让后面的图片出现 a[w].style.display="block";//让图片出现 w++; if(w==5) { w=0; } } setInterval("aa()",1000);//时间函数 </script> </body> </html>哇，太舒适了。小成就啊
