刷新时的随机背景图像

我试图在用户每次访问该网站时随机加载图像。我已经跟踪了几个关于这个问题的线索，似乎无法让它工作。刷新时的随机背景图像

我正在下面这个教程：http://www.markinns.com/articles/full/simple_two_line_image_randomiser_script_with_jquery

但我仍然有问题。图像位于/ images /文件夹中，文件名正确输入到数组中。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" > 

var images = ['OUT01ari.jpg' 'OUT02adobe.jpg' 'OUT03alife.jpg' 'OUT04chinup.jpg' 'OUT05datenightwinecologne.jpg' 'OUT06officechair.jpg' 'OUT07printer.jpg' 'OUT08whitewall.jpg' 'OUT09umbrella.jpg' 'OUT10converse.jpg' 'OUT11wardrobebar.jpg']; 

$('#background').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'}); 

</script>

我随后进入的页面的div，但无济于事：

<body> 

<div ="#background"></div> 
<div class="container"> 

</div> 
</body>

我要去哪里错了？

谢谢。

来源

2013-10-14 Hohohobo

定义数组时，您必须在数组值之间使用逗号分隔符。

你还应该有两个独立的脚本元素，一个用于包含jquery，另一个用于代码。

大多数浏览器都应该忽略具有src属性的脚本标记的内容。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript" ></script> 

<script type="text/javascript"> 
var images = ['OUT01ari.jpg', 'OUT02adobe.jpg', 'OUT03alife.jpg', 'OUT04chinup.jpg', 'OUT05datenightwinecologne.jpg', 'OUT06officechair.jpg', 'OUT07printer.jpg', 'OUT08whitewall.jpg', 'OUT09umbrella.jpg', 'OUT10converse.jpg', 'OUT11wardrobebar.jpg']; 
$('#background').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'}); 
</script>

W3C 4.3 Scripting HTML5说：

If there is a src attribute, the element must be either empty or contain only script documentation that also matches script content restrictions.

而且同样适用于早期版本的，我相信如此。

编辑：

如果您的本地文件系统上工作时，请务必将网址更改为jQuery来HTTP：//，而不是仅仅//。

此外，请确保在#background元素存在时通过调用document ready来执行脚本。

这个例子甚至应该在本地工作：

<html> 
<head> 
    <style type="text/css"> 
    #background { 
    position:fixed; left: 0px; 
    top: 0px; background-size:100%; 
    width:100%; height:100%; 
    -webkit-user-select: none; -khtml-user-select: none; 
    -moz-user-select: none; -o-user-select: none; user-select: none; 
     z-index:9990; 
    } 
    </style> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript" ></script> 
    <script type="text/javascript"> 
    $(function() { 
    var images = ['OUT01ari.jpg', 'OUT02adobe.jpg', 'OUT03alife.jpg', 'OUT04chinup.jpg', 'OUT05datenightwinecologne.jpg', 'OUT06officechair.jpg', 'OUT07printer.jpg', 'OUT08whitewall.jpg', 'OUT09umbrella.jpg', 'OUT10converse.jpg', 'OUT11wardrobebar.jpg']; 
    $('#background').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'}); 
    }); 
    </script> 
</head> 
<body> 
    <div id="background"></div> 
    <div class="container"> 
    </div> 
</body> 
</html>

来源

2013-10-14 21:24:09 becquerel

谢谢，我已经修正了这些错误以及isherwood和jacouh指出的错误，但图像仍未加载。 – Hohohobo

我创建了一个可以工作的小提琴：http://jsfiddle.net/ffXUC/ - 虽然很难说你为什么不是。您是否检查过浏览器控制台/网络开发人员工具（Chrome中的F12）是否有任何错误？ – becquerel

谢谢 - 不，我没有。我得到的错误是：Uncaught ReferenceError：$未定义index.html：11 （匿名函数）。第11行是：$（'#background'）。css（{'background-image'：'url（images /'+ images [Math.floor（Math.random（）* images.length）] +'）'} ）; – Hohohobo

<div ="#background"></div>

应该

<div id="background"></div>

（或者是只是一个错字？）

来源

2013-10-14 21:15:37 isherwood

应该是''

感谢 –

。固定。累了的眼睛。：-D – isherwood

要显示背景图片，一个div必须具有一定的规模/地区，有 - 你试过吗？

<body> 

<div id="background" style="width: 50px; height: 60px;"></div> 
<div class="container"> 

</div> 
</body>

？

来源

2013-10-14 21:20:59 jacouh

我已经给出了100％的背景div宽度和高度属性，所以图像将填满屏幕：#background { \t position：fixed; \t left：0px; \t top：0px; \t background-size：100％; \t宽度：100％; \t身高：100％; \t -webkit-user-select：none; -khtml-user-select：none; -moz-user-select：none; -o-user-select：none; user-select：none; \t z-index：9990; } – Hohohobo

刷新时的随机背景图像

回答

相关问题