欢迎来到361模板(www.ke361.com),原创精品织梦模板提供商。QQ快速注册登录 网站托管 VIP 网站定制

361模板网

当前位置:361模板网 > 技术文档 > 网站技巧 > 网站应用小教程:随机显示广告
这篇文章主要为大家详细介绍了网站应用小教程:随机显示广告,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

关于随机显示,其实在前面的文章《单页每次刷新显示不同二维码号和不同二维码图片的实现方法》里我们就有所接触和介绍,只是当时是没有明确出来是随机显示,而且以每次刷新显示不同信息为标题。我们361模板就随便显示展开来再仔细和大家讲解一下。

情况一:公司有不少业务员,但公司网站的联系方式板块里只够放一个人的信息,所以就想能不能实现这个联系方式信息随机显示,对于业务或客服人员来说也能做到分配均匀公平。

  这个时候我们可以使用前面介绍的方法来处理,也可以使用下面的方法

  首先将想要显示的不同内容分别放到不同的盒子里(div),并用ID属性标记好。例如:

<div id="p1">
<p>联系人:张三</p> 
<p>电话:13344444444</p>
<p>QQ:333333333</p>
<p>地址:青岛开发区武夷山路166号千禧龙花园</p>
</div>
<div id="p2">
<p>联系人:李四</p>
<p>电话:18555555555</p>
<p>QQ:1744444444</p>
<p>地址:青岛开发区武夷山路166号千禧龙花园</p>
</div>
<div id="p3">
<p>联系人:王五</p>
<p>电话:17666666666</p>
<p>QQ:1488888888</p>
<p>地址:青岛开发区武夷山路166号千禧龙花园</p>
</div>

然后通过JS代码来控制,代码逻辑就是先将所有信息隐藏,再获取当前时间秒数,根据要显示的信息个数求余,余数的个数即信息的个数,然后分别对应显示。代码如下:

$(document).ready(function()
{
    $('#p1, #p2, #p3').hide(); 
    second = new Date().getSeconds();
    if((second % 3) == 0) $('#p1').show();
    if((second % 3) == 1) $('#p2').show();
    if((second % 3) == 2) $('#p3').show();    
});

运行后前台效果如下:

这样处理后就基本解决了上面的情况一所描述的问题。

情况二:网站页面只和一个图片广告位置,而且不想通过滚动切换的方法来显示广告,想每次刷新页面都显示不同的广告和图片

这个个时候我们一般会通过JS来实现随机显示图片或者代码的方法来实现,代码如下:

<script language=javascript> 
var m=5; //共几个Banner随机显示 
var n=Math.floor(Math.random()*m+1) 
switch(n) 
{ 
case 1: 
document.write('Banner1的HTML'); 
break; 
case 2: 
document.write('Banner2的HTML'); 
break; 
case 3: 
document.write('Banner3的HTML'); 
break; 
case 4: 
document.write('Banner4的HTML'); 
break; 
case 5: 
document.write('Banner5的HTML'); 
break; 
} 
</script>

上面是一个简单的随机代码功能实现,如果需要有图片或者链接,可以直接使用如下代码

<SCRIPT LANGUAGE="javascript"> 
<!-- Begin 
var how_many_ads = 3; 
var now = new Date() 
var sec = now.getSeconds() 
var ad = sec % how_many_ads; 
ad +=1; 
var txt; 
if (ad==1) { 
txt="banner01"; 
url="http://www.ke361.com"; 
alt="361模板网"; 
banner="/images/mymake/2014/1/2014010517492381345.png"; 
width="300"; 
height="100"; 
} 
if (ad==2) { 
txt="banner02"; 
url="http://www.ke361.com"; 
alt="361模板网"; 
banner="/images/mymake/2016/3/201603072228222807.png"; 
width="468"; 
height="100"; 
} 
if (ad==3) { 
txt="banner03"; 
url="http://www.ke361.com"; 
alt="361模板网"; 
banner="/images/mymake/2014/9/201409101850185013.png"; 
width="300"; 
height="100"; 
} 
document.write('<center>'); 
document.write('<a href="' + url + '" target="_top">'); 
document.write('<img src="' + banner + '" width=') 
document.write(width + ' height=' + height + ' '); 
document.write('alt="' + alt + '" border=0><br>'); 
document.write('<small>' + txt + '</small></a>'); 
document.write('</center>'); 
// End --> 
</SCRIPT>

点击查看效果  可以刷新多次查看效果

我们还可以这样写

<SCRIPT LANGUAGE="javascript"> 
<!-- Begin 
var adver = [];
adver[1] = {
'title' : '白色条纹',
'pic' : '/images/mymake/2016/3/201603072228222807.png',
'link' : 'http://www.ke361.com'
};
adver[2] = {
'title' : '8882图片色 ',
'pic' : '/images/mymake/2014/1/2014010517492381345.png',
'link' : 'http://www.ke361.com'
};
adver[3] = {
'title' : 'DS68246 ',
'pic' : '/images/mymake/2014/1/2014010401170512137.png',
'link' : 'http://www.ke361.com'
};
var i = Math.floor(Math.random()*3+1);
document.write('<a href="'+adver[i].link+'" target="_blank" title="'+adver[i].title+'"><img src="'+adver[i].pic+'"></a>');
</SCRIPT>

这些都可以实现刷新页面随机显示不同广告,相信总有一款是适合你的需求的,给我们点个赞吧。

以上就是网站应用小教程:随机显示广告的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持361模板网。

感谢打赏,我们会为大家提供更多优质资源!

热词标签: 随机广告 网站应用 随机显示广告

上一篇织梦模板列表页隔行换色实现方法介绍

下一篇织梦模板彩色标签云制作实例

取消

感谢您的支持,我们会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by361模板网,分享从这里开始,精彩与您同在