Question

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

我将此代码放在＆＃34; _header.php＆＃34;标签之间：

<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>

Answer 1

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

拿你的代码得到这样的东西：

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

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

真正的问题在于基于Unix的系统的区分大小写。 ImpressPages没有文件夹“theme”。所有主题都放在“主题”中。大部分时间的主题也用大写字母命名。因此，您的图片就在这里：

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

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

Answer 2

除了localhost路径之外，您的代码没有任何明显错误

使用开发人员工具检查器确保（通常在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

有关为什么这是一个更好的方法（统一分布等）的更多信息：Generate random number between two numbers in JavaScript

JavaScript背景图片更改Impresspages上的页面加载

2 个答案: