把代码1 变成 代码2 那种 适合全站使用,然后分就全给你了代码1:
<SCRIPT>
var i=0;
var adl=new Array(6,6);
//6是设置的时间
var timer=setInterval("run()",adl[i]*1000);
function run()
{
for(j=0;j<adl.length;j++)
{
var x=document.getElementById("srhc"+j);
if(j==i) x.style.display="block";
else x.style.display="none";
}
clearInterval(timer);
timer=setInterval("run()",adl[i]*1000);
i=(i<adl.length-1)?++i:0;
}
</SCRIPT>
<DIV id=srhc0 style="DISPLAY: block">
广告111111
</DIV>
<DIV id=srhc1 style="DISPLAY: none">
广告222222
</DIV>
代码2:tab滑动门页面上有N个也不怕
<style>
<!--
.tabname{ width:300px; height:24px; line-height:24px; background:#CCCCCC;}
.tabname a{ display:block; float:left; color:#fff; width:100px; height:24px; line-height:24px; text-align:center;}
.tabname .nowtab{ color:#FF0000; display:block; float:left; width:100px; height:24px; line-height:24px; text-align:center;}
.tabname .nowtag{ color:#FF0000; display:block; float:left; width:100px; height:24px; line-height:24px; text-align:center;}
.con1{ width:300px; height:300px; font-size:20px; color:#000000; background:#9933FF;}
.kuang1{ width:300px; height:400px; background:#99FF99; margin-bottom:30px; display:block; float:left; margin-right:30px;}
.kuang2{ width:300px; height:400px; background:#99FF99; margin-bottom:30px; display:block; float:left; margin-right:30px;}
-->
</style><script>
function selectMenu(scID, oThis, tabID)
{
var oTags = document.getElementById(scID);
var oMenu = oTags.getElementsByTagName("a");
for (i = 0; i < oMenu.length; i++)
{
oMenu[i].className = "";
}
oThis.className = "nowtab";
var divID = scID.substring(0, 3);
for (i = 0; j = document.getElementById(divID + "tab" + i); i++)
{
j.style.display = "none";
}
document.getElementById(tabID).style.display = "";
}
</script>
</head><body>
<div class="kuang1">
<div class="tabname" id="sc_div1">
<a href="#" class="nowtab" onclick="selectMenu('sc_div1',this, 'sc_tab0')">页面一</a>
<a href="#" onclick="selectMenu('sc_div1',this, 'sc_tab1')">页面二</a>
</div>
<div class="con1" id="sc_tab0"><p>这是页面一的内容</p></div>
<div class="con1" id="sc_tab1" style="display:none;"><p>这是页面二的内容</p></div>
</div><div class="kuang1">
<div class="tabname" id="sf_div2">
<a href="#" class="nowtab" onclick="selectMenu('sf_div2',this, 'sf_tab0')">页面一</a>
<a href="#" onclick="selectMenu('sf_div2',this, 'sf_tab1')">页面二</a>
</div>
<div class="con1" id="sf_tab0"><p>这是页面一的内容</p></div>
<div class="con1" id="sf_tab1" style="display:none;"><p>这是页面二的内容</p></div>
</div>
<SCRIPT>
var i=0;
var adl=new Array(6,6);
//6是设置的时间
var timer=setInterval("run()",adl[i]*1000);
function run()
{
for(j=0;j<adl.length;j++)
{
var x=document.getElementById("srhc"+j);
if(j==i) x.style.display="block";
else x.style.display="none";
}
clearInterval(timer);
timer=setInterval("run()",adl[i]*1000);
i=(i<adl.length-1)?++i:0;
}
</SCRIPT>
<DIV id=srhc0 style="DISPLAY: block">
广告111111
</DIV>
<DIV id=srhc1 style="DISPLAY: none">
广告222222
</DIV>
代码2:tab滑动门页面上有N个也不怕
<style>
<!--
.tabname{ width:300px; height:24px; line-height:24px; background:#CCCCCC;}
.tabname a{ display:block; float:left; color:#fff; width:100px; height:24px; line-height:24px; text-align:center;}
.tabname .nowtab{ color:#FF0000; display:block; float:left; width:100px; height:24px; line-height:24px; text-align:center;}
.tabname .nowtag{ color:#FF0000; display:block; float:left; width:100px; height:24px; line-height:24px; text-align:center;}
.con1{ width:300px; height:300px; font-size:20px; color:#000000; background:#9933FF;}
.kuang1{ width:300px; height:400px; background:#99FF99; margin-bottom:30px; display:block; float:left; margin-right:30px;}
.kuang2{ width:300px; height:400px; background:#99FF99; margin-bottom:30px; display:block; float:left; margin-right:30px;}
-->
</style><script>
function selectMenu(scID, oThis, tabID)
{
var oTags = document.getElementById(scID);
var oMenu = oTags.getElementsByTagName("a");
for (i = 0; i < oMenu.length; i++)
{
oMenu[i].className = "";
}
oThis.className = "nowtab";
var divID = scID.substring(0, 3);
for (i = 0; j = document.getElementById(divID + "tab" + i); i++)
{
j.style.display = "none";
}
document.getElementById(tabID).style.display = "";
}
</script>
</head><body>
<div class="kuang1">
<div class="tabname" id="sc_div1">
<a href="#" class="nowtab" onclick="selectMenu('sc_div1',this, 'sc_tab0')">页面一</a>
<a href="#" onclick="selectMenu('sc_div1',this, 'sc_tab1')">页面二</a>
</div>
<div class="con1" id="sc_tab0"><p>这是页面一的内容</p></div>
<div class="con1" id="sc_tab1" style="display:none;"><p>这是页面二的内容</p></div>
</div><div class="kuang1">
<div class="tabname" id="sf_div2">
<a href="#" class="nowtab" onclick="selectMenu('sf_div2',this, 'sf_tab0')">页面一</a>
<a href="#" onclick="selectMenu('sf_div2',this, 'sf_tab1')">页面二</a>
</div>
<div class="con1" id="sf_tab0"><p>这是页面一的内容</p></div>
<div class="con1" id="sf_tab1" style="display:none;"><p>这是页面二的内容</p></div>
</div>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jqeryTab.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
#tab {
background-color: mintcream;
width: 200px;
-width: 205px;
height: 200px;
margin-left: 200px;
}
.header {
height: 20px;
width: 100%;
}
.content {
border: 1px solid #CCCCFF;
border-top: none;
height: 180px;
}
.liStyle {
cursor: pointer;
height: 20px;
width: 66px;
-width: 61px;
float: left;
background-color: white;
}
.show {
background-color: mintcream;
border: 1px solid #CCCCFF;
border-bottom: none;
}
.hide {
background-color: white;
border-bottom: 1px solid #CCCCFF;
}
.ulHide {
display: none;
}
.ulShow {
display: block;
}
ul {
list-style: none outside none;
}
* {
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript">
$(function () {
var ary = $("#tab > ul > li").click(function () {
$(this).parent().find("li.show").addClass("hide").removeClass("show");
$(this).addClass("show").removeClass("hide");
$("#tab > div > ul.ulShow").addClass("ulHide").removeClass("ulShow");
$("#tab > div > ul:eq(" + $.inArray(this, ary) + ")").addClass("ulShow").removeClass("ulHide");
/*$("#tab > div > ul:eq(" + $.inArray(this, ary) + ")").addClass(function () {
$.post("url?#", {param: "params"}, function (data) {
$(this).html(data);
});
return "ulShow";
}).removeClass("ulHide");*/
}).toArray();
});
</script>
</head>
<body bgcolor="white">
<div id="tab">
<ul class="header">
<li class="liStyle show">Java</li>
<li class="liStyle hide">Spring</li>
<li class="liStyle hide">Hibernate</li>
</ul>
<div class="content">
<ul class="ulShow">
Java
<li>java javaSE</li>
<li>java javaME</li>
<li>java javaEE</li>
</ul>
<ul class="ulHide">
Spring
<li>java springMVC</li>
<li>java spring aop</li>
<li>java spring Ioc DI</li>
</ul>
<ul class="ulHide">
Hibernate
<li>java Hibernate Configuration Transaction</li>
<li>java Hibernate Query Criteria</li>
<li>java Hibernate Session SessionFactory</li>
</ul>
</div>
</div>
</body>
</html>
function Switch(objs, time){
(function(objs, time){
for(var i=0; i<objs.length; i++){
if(typeof objs[i] == 'string'){
objs[i] = document.getElementById(objs[i]);
}
if(i > 0) objs[i].style.display = 'none';
}
var curIndex = 0;
window.setInterval(function(){
objs[curIndex].style.display = 'none';
if(++curIndex == objs.length){
curIndex = 0;
}
objs[curIndex].style.display = 'block';
},time);
})(objs,time);
}
window.onload=function(){
Switch(['srhc0','srhc1','srhc2','srhc3'], 200);
Switch(['font1','font2','font3','font4','font5'], 200);
}
</SCRIPT>
<DIV id=srhc0>
广告111111
</DIV>
<DIV id=srhc1>
广告222222
</DIV>
<DIV id=srhc2>
广告333333
</DIV>
<DIV id=srhc3>
广告444444
</DIV><DIV id=font1>
<font color=red>广告</font>
</DIV>
<DIV id=font2>
<font color=green>广告</font>
</DIV>
<DIV id=font3>
<font color=gray>广告</font>
</DIV>
<DIV id=font4>
<font color=blue>广告</font>
</DIV>
<DIV id=font5>
<font color=black>广告</font>
</DIV>