0

我想按照http://www.9lessons.info/2011/03/background-image-change-on-refresh-with.html中的描述在 Impresspages 4.2.3 上的页面加载上实现 javascript 背景图像转换器。它适用于我的本地主机，但在移动到我的托管服务器时不起作用。

我把这段代码放在标签之间的“_header.php”下面：

<script type="text/javascript"> 
var totalCount = 4;
function ChangeIt() 
{
var num = Math.ceil( Math.random() * totalCount );
document.body.background = 'http://localhost/halmaheradivecruise.com/theme/air/assets/img/'+num+'.jpg';
document.body.style.backgroundRepeat = "repeat";// Background repeat
}
</script>

并且下面的代码在标签中：

<script type="text/javascript"> 
ChangeIt();
</script>
4

2 回答 2

1

在破解代码之前，请检查您尝试加载的图像是否确实存在。

获取您的代码，您会得到如下信息：

http://www.halmaheradivecruise.com/theme/air/assets/img/2.jpg

如果您点击此链接，您将收到“404 not found”错误。所以问题出在链接而不是脚本上。

真正的问题在于基于 Unix 的系统的大小写敏感性。ImpressPages 没有文件夹“主题”。所有主题都放在“主题”中。大多数时候，主题也以大写字母命名。因此，您的图像在这里：

http://www.halmaheradivecruise.com/Theme/BantikAir/assets/img/3.jpg

在本地主机上它可以工作，因为 Windows 看不到小写字母和大写字母之间的任何区别。而 Unix 系统将它们视为不同的路径。

于 2014-10-07T06:06:40.143 回答
0

除了本地主机路径之外，您的代码没有明显不正确的地方

  • 使用开发人员工具检查器确保（通常在 mac 上使用 cmd + alt + i 或在 Windows 上使用 f12）并选择网络选项卡以确保图像没有得到 404。
  • 也在开发者工具中使用 javascript 控制台来确保没有 javascript 错误
  • 如果您仍然遇到问题，请尝试ChangeIt()通过在浏览器开发工具的 javascript 控制台中手动键入所有脚本来确保您的调用是在所有脚本加载完成后进行的

此外，而不是：

var num = Math.ceil( Math.random() * totalCount );

尝试

var num = Math.floor(Math.random() * totalCount) + 1

有关为什么这是一种更好的方法（均匀分布等）的更多信息：在 JavaScript 中生成两个数字之间的随机数

于 2014-10-07T05:12:56.633 回答