如何通过JS实现广告位随机显示不同图片及链接?

爱折腾的星云 29 0
OUIMS博客广告

很多个人博客网站上都有一些固定的广告位,大多数都是投放一些图片广告,有些博主是通过投放 gif 格式的广告图片,有些直接投放 jpg 或 png 格式图片。这种做法都是只能一个广告位显示一个广告图片和一个链接地址,那么有没有可能实现一个广告位随机显示不同的图片及链接地址呢?

其实,明月登楼博主早就分享过具体的实现办法了,详见『分享个简单的随机图片广告代码』。今天 OUIMS博客 就根据这篇文章来折腾一下本站的广告位。

实现广告位随机显示不同图片及链接地址步骤

1、将以下代码添加中的阿里云、腾讯云推广地址及图片地图更换为你自己的广告链接地址及图片(PS:建议两个图片大小高度一致),然后另存为一个 JS 文件,如 suijitupian.js,然后上传到网站根目录某个位置(一般建议放在主题文件夹下的 js 文件夹)。

var p=2;var q=Math.floor(Math.random()*p+1)switch(q){case 1:document.writeln("<a href='阿里云推广地址' target='_blank' rel='nofollow noopener'><img src='阿里云广告图片地址'></a>");break;case 2:document.writeln("<a href='腾讯云推广地址' target='_blank' rel='nofollow noopener'><img src='腾讯云广告图片地址'></a>");break;}

说明:以上代码只是显示两个广告,如果想要显示多个,比如显示 5 个,那么就把上述代码中的 p=2 改为 p=5,复制 case2 及对应的内容修改为 case 3、case 4 和 case 5 即可。记得修改相应链接地址及广告图片地址。想了解 Math.floor(Math.random()*p+1)是什么意思请移步『JS 中的 Math.floor()和 Math.random()是什么意思?』。

2、将以下代码中的 JS 文件地址修改好之后,直接将以下代码添加到想要显示广告的位置即可。如果主题集成有广告位管理功能的,直接添加到广告位也行。

<div class="abc-pc abc-site"><script type="text/javascript" src="第 1 步 JS 文件地址"></script></div>

至此,我们已经实现了广告位随机显示不同的广告图片及对应的链接地址。具体效果可以看 boke112 导航首页和文章页评论框下方的广告图片(PS:由于不知道放什么图片,所以就放两张不同的阿里云广告图片)。有时候刷新就能看到显示不同的广告图片,因为只放两个图片,虽然说是 50%的概率,但是也不一定每次都能看到不同的图片。

标签: 精品教程 代码教程

OUIMS博客广告

发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~