JS实现广告顺序轮播和随机轮播四份代码
时间：2010-09-26 来源：piikee
不多说，直接上代码：
第一份顺序上滚(DIV遮罩滚动方法):
广告时间，插点广告先
：转载请注明来自【萍客小居http://www.piikee.net/】
<html>
<head>
<STYLE type=text/css>BODY {MARGIN-TOP: 0px; MARGIN-LEFT: 0px ;MARGIN-BOTTOM: 0px; MARGIN-RIGHT: 0px}</STYLE>
</head>
<body>
<div id="marqueebox" style="margin-top:0px;width:369px;float:left;line-text-align:top;overflow:hidden ">
<div> <a href="http://www.piikee.net" target="_blank">第一个广告代码</a></div>
<div> <a href="http://www.orz123.com" target="_blank">第二个广告代码</a></div>
<div> <a href="http://www.yayataobao.com/blog/" target="_blank">第三个广告代码</a></div>
<div> <a href="http://caipiao.qqxk.net" target="_blank">第四个广告代码</a></div>
<div> <a href="http://www.yayataobao.com" target="_blank">第五个广告代码</a></div>
<div> <a href="http://www.orz123.net" target="_blank">第六个广告代码</a></div>
</div>
<div style="display:none;width=0;height=0">
<script>
<!--
function startmarquee(height,delay)
{
var p=false;
var piikee=document.getElementById("marqueebox");
var orz123=piikee.getElementsByTagName("div");
var divcount =orz123.length -1 ;
piikee.onmouseover=function(){p=true;}
piikee.onmouseout=function(){p=false;}
piikee.scrollTop = 0;
function start()
{
t=setInterval(scrolling,delay);
if(piikee.scrollTop >= height*divcount)
{
piikee.scrollTop = 0 ;
}
else
{
if(!p)
{
piikee.scrollTop += height;
}
}
}
function scrolling()
{
clearInterval(t);
setTimeout(start,delay);
}
setTimeout(start,delay);
}
startmarquee(22,1000); //startmarquee(一次滚动高度,每次停留时间) 注意你div中广告高度多少这里就设置多少
//-->
</script>
</div>
</body>
</html>
第二份顺序上滚(div隐藏方法):
<html>
<head>
<STYLE type=text/css>BODY {MARGIN-TOP: 0px; MARGIN-LEFT: 0px ;MARGIN-BOTTOM: 0px; MARGIN-RIGHT: 0px}</STYLE>
</head>
<body>
<div id="msgBox" onMouseOver="myStop();" onMouseOut="myStart()">
<div> <a href="http://www.piikee.net" target="_blank">第一个广告代码</a></div>
<div > <a href="http://www.orz123.com" target="_blank">第二个广告代码</a></div>
<div > <a href="http://www.qqxk.net" target="_blank">第三个广告代码</a></div>
<div > <a href="http://caipiao.qqxk.net" target="_blank">第四个广告代码</a></div>
<div > <a href="http://tejia.qqxk.net" target="_blank">第五个广告代码</a></div>
<div > <a href="http://www.ctbuxiu.com" target="_blank">第六个广告代码</a></div>
</div>
<script>
<!--
var delay;
var b = 0;
var t = null;
var flag = true;
var piikee = document.getElementById("msgBox");
var orz123 = piikee.getElementsByTagName("div");
var divCount = orz123.length;
for(var i=0;i<divCount;i++)
{
orz123[i].style.display="none";
}
function scrollNew(delay)
{
t = setInterval(startScroll,delay);
function startScroll()
{
if(b==divCount)
{
orz123[b-1].style.display="none";
b=0;
}
if(flag)
{
if(b>0)
orz123[b-1].style.display="none";
orz123[b].style.display = "block";
b++;
}
}
}
function myStop()
{
flag=false;
}
function myStart()
{
flag=true;
}
scrollNew(1000);
</script>
</body>
</html>
第三份随机上滚(DIV遮罩滚动方法):
<html>
<head>
<STYLE type=text/css>BODY {MARGIN-TOP: 0px; MARGIN-LEFT: 0px ;MARGIN-BOTTOM: 0px; MARGIN-RIGHT: 0px}</STYLE>
</head>
<body>
<div id="marqueebox" style="margin-top:0px;width:369px;float:left;line-text-align:top;overflow:hidden ">
<div> <a href="http://www.piikee.net" target="_blank">第一个广告代码</a></div>
<div> <a href="http://www.orz123.com" target="_blank">第二个广告代码</a></div>
<div> <a href="http://www.yayataobao.com/blog/" target="_blank">第三个广告代码</a></div>
<div> <a href="http://caipiao.qqxk.net" target="_blank">第四个广告代码</a></div>
<div> <a href="http://www.yayataobao.com" target="_blank">第五个广告代码</a></div>
<div> <a href="http://www.orz123.net" target="_blank">第六个广告代码</a></div>
</div>
<div style="display:none;width=0;height=0">
<script>
<!--
function startmarquee(height,delay){
var p=false;
var piikee=document.getElementById("marqueebox");
var orz123=piikee.getElementsByTagName("div");
var divcount =orz123.length-1;
piikee.onmouseover=function(){p=true;}
piikee.onmouseout=function(){p=false;}
piikee.scrollTop = Math.round( Math.random() * divcount)* height;
function start()
{
t=setInterval(scrolling,delay);
if(!p)
{
piikee.scrollTop = Math.round( Math.random() * divcount)* height;
}
}
function scrolling()
{
clearInterval(t);
setTimeout(start,delay);
}
setTimeout(start,delay);
}
startmarquee(22,1000); //startmarquee(一次滚动高度,每次停留时间) 注意你div中广告高度多少这里就设置多少滚动高度
//-->
</script>
</div>
</body>
</html>
第四份随机上滚(div隐藏方法):
<html>
<head>
<STYLE type=text/css>BODY {MARGIN-TOP: 0px; MARGIN-LEFT: 0px ;MARGIN-BOTTOM: 0px; MARGIN-RIGHT: 0px}</STYLE>
</head>
<body>
<div id="msgBox" onMouseOver="myStop();" onMouseOut="myStart()">
<div> <a href="http://www.piikee.net" target="_blank">第一个广告代码</a></div>
<div > <a href="http://www.orz123.com" target="_blank">第二个广告代码</a></div>
<div > <a href="http://www.qqxk.net" target="_blank">第三个广告代码</a></div>
<div > <a href="http://caipiao.qqxk.net" target="_blank">第四个广告代码</a></div>
<div > <a href="http://tejia.qqxk.net" target="_blank">第五个广告代码</a></div>
<div > <a href="http://www.ctbuxiu.com" target="_blank">第六个广告代码</a></div>
</div>
<script>
<!--
var delay;
var b = 0;
var t = null;
var flag = true;
var piikee = document.getElementById("msgBox");
var orz123 = piikee.getElementsByTagName("div");
var divCount = orz123.length;
for(var i=0;i<divCount;i++)
{
orz123[i].style.display="none";
}
function scrollNew(delay)
{
t = setInterval(startScroll,delay);
function startScroll()
{
if(flag)
{
orz123[b].style.display="none";
b = Math.round( Math.random() * (divCount-1));
orz123[b].style.display="block";
}
}
}
function myStop()
{
flag=false;
}
function myStart()
{
flag=true;
}
scrollNew(1000);
</script>
</body>
</html>
第一份顺序上滚(DIV遮罩滚动方法):
广告时间，插点广告先
：转载请注明来自【萍客小居http://www.piikee.net/】<html>
<head>
<STYLE type=text/css>BODY {MARGIN-TOP: 0px; MARGIN-LEFT: 0px ;MARGIN-BOTTOM: 0px; MARGIN-RIGHT: 0px}</STYLE>
</head>
<body>
<div id="marqueebox" style="margin-top:0px;width:369px;float:left;line-text-align:top;overflow:hidden ">
<div> <a href="http://www.piikee.net" target="_blank">第一个广告代码</a></div>
<div> <a href="http://www.orz123.com" target="_blank">第二个广告代码</a></div>
<div> <a href="http://www.yayataobao.com/blog/" target="_blank">第三个广告代码</a></div>
<div> <a href="http://caipiao.qqxk.net" target="_blank">第四个广告代码</a></div>
<div> <a href="http://www.yayataobao.com" target="_blank">第五个广告代码</a></div>
<div> <a href="http://www.orz123.net" target="_blank">第六个广告代码</a></div>
</div>
<div style="display:none;width=0;height=0">
<script>
<!--
function startmarquee(height,delay)
{
var p=false;
var piikee=document.getElementById("marqueebox");
var orz123=piikee.getElementsByTagName("div");
var divcount =orz123.length -1 ;
piikee.onmouseover=function(){p=true;}
piikee.onmouseout=function(){p=false;}
piikee.scrollTop = 0;
function start()
{
t=setInterval(scrolling,delay);
if(piikee.scrollTop >= height*divcount)
{
piikee.scrollTop = 0 ;
}
else
{
if(!p)
{
piikee.scrollTop += height;
}
}
}
function scrolling()
{
clearInterval(t);
setTimeout(start,delay);
}
setTimeout(start,delay);
}
startmarquee(22,1000); //startmarquee(一次滚动高度,每次停留时间) 注意你div中广告高度多少这里就设置多少
//-->
</script>
</div>
</body>
</html>
第二份顺序上滚(div隐藏方法):
<html>
<head>
<STYLE type=text/css>BODY {MARGIN-TOP: 0px; MARGIN-LEFT: 0px ;MARGIN-BOTTOM: 0px; MARGIN-RIGHT: 0px}</STYLE>
</head>
<body>
<div id="msgBox" onMouseOver="myStop();" onMouseOut="myStart()">
<div> <a href="http://www.piikee.net" target="_blank">第一个广告代码</a></div>
<div > <a href="http://www.orz123.com" target="_blank">第二个广告代码</a></div>
<div > <a href="http://www.qqxk.net" target="_blank">第三个广告代码</a></div>
<div > <a href="http://caipiao.qqxk.net" target="_blank">第四个广告代码</a></div>
<div > <a href="http://tejia.qqxk.net" target="_blank">第五个广告代码</a></div>
<div > <a href="http://www.ctbuxiu.com" target="_blank">第六个广告代码</a></div>
</div>
<script>
<!--
var delay;
var b = 0;
var t = null;
var flag = true;
var piikee = document.getElementById("msgBox");
var orz123 = piikee.getElementsByTagName("div");
var divCount = orz123.length;
for(var i=0;i<divCount;i++)
{
orz123[i].style.display="none";
}
function scrollNew(delay)
{
t = setInterval(startScroll,delay);
function startScroll()
{
if(b==divCount)
{
orz123[b-1].style.display="none";
b=0;
}
if(flag)
{
if(b>0)
orz123[b-1].style.display="none";
orz123[b].style.display = "block";
b++;
}
}
}
function myStop()
{
flag=false;
}
function myStart()
{
flag=true;
}
scrollNew(1000);
</script>
</body>
</html>
第三份随机上滚(DIV遮罩滚动方法):
<html>
<head>
<STYLE type=text/css>BODY {MARGIN-TOP: 0px; MARGIN-LEFT: 0px ;MARGIN-BOTTOM: 0px; MARGIN-RIGHT: 0px}</STYLE>
</head>
<body>
<div id="marqueebox" style="margin-top:0px;width:369px;float:left;line-text-align:top;overflow:hidden ">
<div> <a href="http://www.piikee.net" target="_blank">第一个广告代码</a></div>
<div> <a href="http://www.orz123.com" target="_blank">第二个广告代码</a></div>
<div> <a href="http://www.yayataobao.com/blog/" target="_blank">第三个广告代码</a></div>
<div> <a href="http://caipiao.qqxk.net" target="_blank">第四个广告代码</a></div>
<div> <a href="http://www.yayataobao.com" target="_blank">第五个广告代码</a></div>
<div> <a href="http://www.orz123.net" target="_blank">第六个广告代码</a></div>
</div>
<div style="display:none;width=0;height=0">
<script>
<!--
function startmarquee(height,delay){
var p=false;
var piikee=document.getElementById("marqueebox");
var orz123=piikee.getElementsByTagName("div");
var divcount =orz123.length-1;
piikee.onmouseover=function(){p=true;}
piikee.onmouseout=function(){p=false;}
piikee.scrollTop = Math.round( Math.random() * divcount)* height;
function start()
{
t=setInterval(scrolling,delay);
if(!p)
{
piikee.scrollTop = Math.round( Math.random() * divcount)* height;
}
}
function scrolling()
{
clearInterval(t);
setTimeout(start,delay);
}
setTimeout(start,delay);
}
startmarquee(22,1000); //startmarquee(一次滚动高度,每次停留时间) 注意你div中广告高度多少这里就设置多少滚动高度
//-->
</script>
</div>
</body>
</html>
第四份随机上滚(div隐藏方法):
<html>
<head>
<STYLE type=text/css>BODY {MARGIN-TOP: 0px; MARGIN-LEFT: 0px ;MARGIN-BOTTOM: 0px; MARGIN-RIGHT: 0px}</STYLE>
</head>
<body>
<div id="msgBox" onMouseOver="myStop();" onMouseOut="myStart()">
<div> <a href="http://www.piikee.net" target="_blank">第一个广告代码</a></div>
<div > <a href="http://www.orz123.com" target="_blank">第二个广告代码</a></div>
<div > <a href="http://www.qqxk.net" target="_blank">第三个广告代码</a></div>
<div > <a href="http://caipiao.qqxk.net" target="_blank">第四个广告代码</a></div>
<div > <a href="http://tejia.qqxk.net" target="_blank">第五个广告代码</a></div>
<div > <a href="http://www.ctbuxiu.com" target="_blank">第六个广告代码</a></div>
</div>
<script>
<!--
var delay;
var b = 0;
var t = null;
var flag = true;
var piikee = document.getElementById("msgBox");
var orz123 = piikee.getElementsByTagName("div");
var divCount = orz123.length;
for(var i=0;i<divCount;i++)
{
orz123[i].style.display="none";
}
function scrollNew(delay)
{
t = setInterval(startScroll,delay);
function startScroll()
{
if(flag)
{
orz123[b].style.display="none";
b = Math.round( Math.random() * (divCount-1));
orz123[b].style.display="block";
}
}
}
function myStop()
{
flag=false;
}
function myStart()
{
flag=true;
}
scrollNew(1000);
</script>
</body>
</html>
相关阅读 更多 +
