javascript - 如何使我的横幅定期刷新到另一个随机横幅？

Question

我有一个网站，在页面加载时显示广告横幅。我希望它在有人查看该网站时也能改变，也许几分钟后？

这是我当前的代码，它使用 PHP 显示初始横幅:

$path = '/images/adbanners/'; 
$banners = array( 
array( 'src' => 'look.jpg', 
'href' => 'http://www.example.com/look'), 
array( 'src' => 'see.jpg', 
'href' => 'http://www.example.com/see'), 
array( 'src' => 'horse.jpg',
'href' => 'http://www.example.com'), 
array( 'src' => 'scg.png', 
'href' => 'https://www.example.com/scg/'), 
array( 'src' => 'karen.png', 
'href' => 'http://www.example.com/'karen), 
); 

$rnd = mt_rand(0,count($banners)-1); // Pick a random array index.  They start with 0, so you have to -1. 
$href = $banners[$rnd]['href'];  // Link HREF 
$src = $path.$banners[$rnd]['src']; // Image source 
$randombanner = '<a href="'.$href.'" target="_blank" alt="example.com Sponsor!" title="example.com Sponsor!"><img border="0" src="'.$src.'" /></a>'; 
vB_Template::preRegister('navbar', array('randombanner' => $randombanner));  

我有一个想法，这可以使用 JavaScript 来完成，但不知道从哪里开始。我不想将 jQuery 之类的库添加到该网站，因为它还没有将其用于任何用途。

Answer 1

如果您想每 5 分钟加载一个新的 iframe，只需使用 setInterval :

window.adverts = [
    {src:'look.jpg', href:'http://www.example.com/look'},
    {src:'see.jpg', href:'http://www.example.com/see'},
    //etc
];
setInterval(function() {
    var rnd = Math.floor(Math.random() * adverts.length);
    var banner = document.getElementById('bannerId');
    banner.getElementByTagName('img')[0].src = adverts[rnd].src;
    banner.href = adverts[rnd].href;
}, 5 * 60 * 1000);

这将要求您添加 id="bannerId"到您的横幅周围 <a>标签。您还可以更改 'bannerId'如果您愿意，可以在脚本中将其添加到任何其他 ID，然后将另一个 ID 添加到您的横幅中。

这会将所有广告的图像源和 anchor URL 存储在全局对象 adverts 中然后运行代码每 5 分钟切换到另一个随机广告。您只需将此脚本放在 <script> 中即可html 页面上的标签。您可以不手动添加 url，也可以通过 PHP 注入(inject) url，而是通过类似这样的方法来定义全局 adverts变量:

window.adverts = [
    <?php
        echo json_encode($banners)
    ?>
];

这会自动放入您 $banners 中的所有内容变量到 JavaScript adverts变量。