gpt4 book ai didi

jquery - 刷新时随机背景图像

转载 作者:行者123 更新时间:2023-12-03 22:13:34 26 4
gpt4 key购买 nike

我试图在用户每次访问该网站时随机加载图像。我已经按照教程和之前的几个关于该问题的线程进行操作,但似乎无法使其正常工作。图像位于/images/文件夹中,并且文件名已正确输入到数组中:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" />
<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>

然后我在页面正文中输入了 div,但没有效果:

<body>

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

</div>
</body>

我哪里出错了?

最佳答案

定义数组时,数组值之间必须有逗号分隔符。

您还应该有两个单独的脚本元素,一个用于包含 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 的 URL 更改为 http://,而不仅仅是 //

此外,通过调用document ready来确保#background元素存在时执行您的脚本。 .

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

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

关于jquery - 刷新时随机背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19369426/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com