当前位置:首页 > 计算机相关 > JS专区 > 正文内容

JS实现广告顺序轮播和随机轮播四份代码

piikee14年前 (2010-09-26)JS专区466
不多说,直接上代码:
第一份顺序上滚(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;height:22px;float:left;line-height:22px;text-align:top;overflow:hidden ">
<div>&nbsp;<a href="http://www.piikee.net" target="_blank">第一个广告代码</a></div>
<div>&nbsp;<a href="http://www.orz123.com" target="_blank">第二个广告代码</a></div>
<div>&nbsp;<a href="http://www.ruohuai.com/blog/" target="_blank">第三个广告代码</a></div>
<div>&nbsp;<a href="http://www.rxq.cc" target="_blank">第四个广告代码</a></div>
<div> &nbsp;<a href="http://www.ruohuai.com" target="_blank">第五个广告代码</a></div>
<div>&nbsp;<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>
[/code]
第二份顺序上滚(div隐藏方法):
[code]
<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>&nbsp;<a href="http://www.piikee.net" target="_blank">第一个广告代码</a></div>
<div >&nbsp;<a href="http://www.orz123.com" target="_blank">第二个广告代码</a></div>
<div  >&nbsp;<a href="http://www.qqxk.net" target="_blank">第三个广告代码</a></div>
<div  >&nbsp;<a href="http://www.rxq.cc" target="_blank">第四个广告代码</a></div>
<div   > &nbsp;<a href="http://www.ruohuai.com" target="_blank">第五个广告代码</a></div>
<div  >&nbsp;<a href="http://www.gupiaogupiao.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>
[/code]
第三份随机上滚(DIV遮罩滚动方法):
[code]
<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;height:22px;float:left;line-height:22px;text-align:top;overflow:hidden ">
<div>&nbsp;<a href="http://www.piikee.net" target="_blank">第一个广告代码</a></div>
<div>&nbsp;<a href="http://www.orz123.com" target="_blank">第二个广告代码</a></div>
<div>&nbsp;<a href="http://www.ruohuai.com/blog/" target="_blank">第三个广告代码</a></div>
<div>&nbsp;<a href="http://www.rxq.cc" target="_blank">第四个广告代码</a></div>
<div> &nbsp;<a href="http://www.ruohuai.com" target="_blank">第五个广告代码</a></div>
<div>&nbsp;<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>
[/code]
第四份随机上滚(div隐藏方法):
[code]
<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>&nbsp;<a href="http://www.piikee.net" target="_blank">第一个广告代码</a></div>
<div >&nbsp;<a href="http://www.orz123.com" target="_blank">第二个广告代码</a></div>
<div  >&nbsp;<a href="http://www.rxq.cc" target="_blank">第三个广告代码</a></div>
<div  >&nbsp;<a href="http://www.ruohuai.com" target="_blank">第四个广告代码</a></div>
<div   > &nbsp;<a href="http://www.gupiaogupiao.com" target="_blank">第五个广告代码</a></div>
<div  >&nbsp;<a href="http://www.ruohuai.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>
[/code]

扫描二维码推送至手机访问。

版权声明:本文由萍客小居发布,如需转载请注明出处。

本文链接:https://www.piikee.net/759.html

分享给朋友:

相关文章

lotus domino下使用FCKeditor

lotus domino下使用FCKeditor,有两种插入方法。第一种(比较推荐的方法):HTML首页内容里面加入"<script type='text/javascript' src='/fck/fckeditor.js'>...

JS函数封装三个例子

最近太浮躁了。。。直接上代码。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。