如何让我的横幅定期刷新为另一个随机横幅？

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 添加到您的横幅中。

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

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

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

Answer 2

我建议以 JSON 格式发送其他广告列表，然后使用 JS 进行交换。您可以使用setInterval 来做到这一点。如果没有 jQuery，这有点棘手，您网站上还有其他库吗？

对于 PHP，添加

$ads_json=json_encode($banners);

在您声明 $banners 数组的位置下方。

将您的横幅元素更改为具有 ID，以便我们可以轻松地通过 JS 访问它。

$randombanner = '<a id="sponsor_banner" href="'.$href.'" target="_blank" alt="example.com Sponsor!" title="example.com Sponsor!"><img border="0" src="'.$src.'" /></a>'; 

然后添加到 $randombanner html...

<script>
    var ads='.$ads_json.';
    function swap_ad(){
        var ad_el=document.getElementById("sponsor_banner");
        var img=ad_el.getElementsByTagName('img')[0];
        var random_ad=ads[Math.floor(Math.random()*items.length)];
        ad_el.href=random_ad["href"];
        img.src='.$path.'random_ad["src"];
        };
    window.setInterval(swap_ad,90000000);
</script>

将脚本放在头上会很好。将它放在元素中会起作用，但不确定 vBulletin 的局限性。

Answer 3

PHP 是一种服务器端语言，它的工作在您的页面加载时完成。但是，htmlgoodies 等网站提供了一些可靠的教程，可以帮助您找到所需的内容。

在此处查看本教程：http://www.htmlgoodies.com/beyond/javascript/article.php/3881826

Answer 4

使用超时。一段时间的文档在https://developer.mozilla.org/en-US/docs/Web/API/Window.setTimeout

基本上，您设置了一个超时函数来调用您的函数，该函数会在设定的毫秒数后更改横幅。

window.setTimeout(function() {
    // call to function to rotate or change banner
}, ms);

这有帮助吗？或者您是在寻找 JS 中的完整示例。