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

 2019-06-12 16:50:11  72 人阅读  13 条评论
 最佳答案:

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

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

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

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%的概率,但是也不一定每次都能看到不同的图片。

您可能感兴趣的文章

问题标签: ,  更多问题标签>>
编辑作者:懿古今(QQ号:2226524923,QQ邮箱:boke112@qq.com)
免责声明:本文内容来源于互联网,仅供参考学习之用,如有侵权请联系本站修改删除!
问题分类:WordPress问题 ,  建站/技术问题 ,  主机/服务器问题 ,  办公软件问题 ,  搜索热点问题 ,  综合其他问题
©boke112导航,本站推荐使用:阿里云 ECS服务器等云产品服务,国外免备案主机建议使用:老薛主机

 发表评论

强表情无奈表情抠鼻表情笑哭表情偷笑表情衰表情流汗表情奋斗表情吐血表情抓狂表情晕表情流泪表情疑问表情呲牙表情惊讶表情鼓掌表情

  1. 值品
    值品 @回复

    学习了,不过我的广告位都还没放完。

  2. SKY8G网
    SKY8G网 @回复

    这个想法不错的,与SKY8G网站文章详情页面advertising 随机显示位置雷同,谢谢分享哈。

  3. 明月登楼
    明月登楼 @回复

    我都好久没有研究过了!

    • 懿古今
      懿古今2019-06-13 11:24  回复

      @明月登楼[呲牙] 我也是想着总是挂一张广告图片太单调,又懒得折腾GIF格式图片,所以就找到你那篇博文来折腾了。

  4. 闲鱼
    闲鱼 @回复

    [偷笑] 为了那几毛钱大家都不容易

  5. 凯少技术网
    凯少技术网 @回复

    这个好,带走了,谢谢老大

  6. WordPress建站吧
    WordPress建站吧 @回复

    确实有用的,可以在加点其他的代码 防止恶意点击,比如点击过谷歌广告的人2天不再给他展示谷歌广告。。。。随机展示2张图也可以用来测试2张图片的点击率,图1和图2 展现次数理论是均等的,那么两张图的点击率高的就保留,测试出高点击率图片

  7. 网上赚零花钱
    网上赚零花钱 @回复

    还行,前来学习一下

  8. 技术库
    技术库 @回复

    这样感觉很累赘啊

  9. 投资项目网
    投资项目网 @回复

    这个应该也还是实用呢