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。

这会将所有广告的图像源和锚定网址存储在全局对象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数组的位置下方。

将您的banner元素更改为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中的完整示例。

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

4 个答案: