Javascript 旋转横幅

Posted 2023-03-06

【中文标题】Javascript 旋转横幅

【英文标题】：Javascript Rotating Banner

【发布时间】：2016-04-15 10:33:51

【问题描述】：

我想使用 javascript 制作一个旋转横幅。这是为了在我的网站上投放广告，其中包含带有可点击链接的图片，并且每 5 秒更改一次。我希望横幅为 728x90。我想在 javascript 文件中包含图像和链接文件，因此如果需要对其进行修改，则无需经过 100 个 html 页面即可轻松完成。有没有人可以帮助我解决这个问题？我对编码很陌生，所以如果有人能给我一个基本的演练，那将不胜感激。

【问题讨论】：

请写下你试过的代码。

如果失败请尝试一些方法，然后发布您的代码以获得帮助。

第一步：学习javascript。第 2 步：???，第 3 步：利润 - 真可惜，我有 726x90 的完美代码......如此接近

【参考方案1】：

要将图片作为链接提供，您需要将其嵌入到锚元素中。

<a id="ad-link" href="url to advertisements homepage" >
    <img id="ad-img" src="url to image">
</a>

要在运行时通过 JavaScript 设置 url，你可以简单地做

document.getElementById("ad-link").setAttribute("href", "http://...");
document.getElementById("ad-img").setAttribute("src", "http://...");

要每 5 秒更改一次横幅，您需要定义一个超时时间，然后调用特定的函数。

setTimeout(function() 
    //update banner
, 5000);

要旋转横幅，我建议使用 css。见How to do a webkit css endless rotation-animation.

【讨论】：

所以我编辑了链接和图片，应该是这样的("href", "***.com, google.com");对吧？？？用逗号隔开。至于html 代码，我应该在那里编辑任何东西吗？？？我插入了代码，制作了一个 css 文件，我弹出了一个框，但没有图像，链接也不起作用。他们无法找到。

“src”和“href”属性指向一个url。所以你不能设置多个网址。您还应该包括“http://”。当然，javascript部分需要在页面加载完成后执行（w3schools.com/jsref/event_onload.asp）。