1 html构建骨架，css简单化妆，js实现切换。 2 3 4 5 <!DOCTYPE html> 6 7 <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 8 <head> 9 <meta charset="utf-8" /> 10 <title></title> 11 12 13 <style type="text/css"> 14 body { 15 margin: 0; 16 padding: 0; 17 } 18 19 div { 20 position: absolute; 21 width: 100%; 22 height: 100%; 23 } 24 25 /*#iframeTop { 26 width: 100%; 27 height: 100px; 28 } 29 30 #iframeLeft { 31 width: 15%; 32 float: left; 33 height: 100%; 34 }*/ 35 36 #iframeContent { 37 width: 100%;//若需要iframeLeft 需修改此处百分比 38 height: 100%; 39 min-height:600px; 40 41 } 42 </style> 43 <script type="text/javascript"> 44 var i = 0; 45 function exchange() { 46 i = i + 1; 47 // var myDate = new Date();//测试用 48 //alert(myDate.getSeconds()); 49 switch (i) { 50 case 1: 51 document.getElementById("iframeContent").src = "你的链接"; 52 break; 53 case 2: 54 document.getElementById("iframeContent").src = "your link"; 55 break; 56 57 default: 58 document.getElementById("iframeContent").src = "your link"; 59 } 60 61 if (i==3) { 62 i = 0; 63 } 64 } 65 //重复执行某个方法 66 var t= window.setInterval("exchange()", 5000);//5秒一切 时间自定 67 //去掉定时器的方法 68 //window.clearInterval(t); 69 </script> 70 </head> 71 <body> 72 <div> 73 <!--<iframe id="iframeTop" name="iframeTop" frameborder="0" src="head.htm"></iframe>--> 74 <!--<iframe id="iframeLeft" name="iframeLeft" frameborder="0" src="gmenu.htm"></iframe>--> 75 <iframe id="iframeContent" name="iframeContent" frameborder="0" src="your link"></iframe> 76 </div> 77 </body> 78 </html> 79
原文：https://www.cnblogs.com/chengcanghai/p/13323421.html