刷新时的随机背景图像 [英] Random background image on refresh

查看：28
本文介绍了刷新时的随机背景图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图在用户每次访问网站时随机加载一张图片.我遵循了一个教程和几个关于这个问题的先前线程，但似乎无法让它工作.图像位于/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' 'OUT09'umbrella.OUT10converse.jpg' 'OUT11wardrobebar.jpg'];$('#background').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'});

然后我在页面正文中输入了 div，但无济于事:

<div ="#background"></div><div class="容器">

我哪里出错了?

解决方案

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

您还应该有两个单独的脚本元素，一个用于包含 jquery，另一个用于您的代码.

带有 src-attribute 的 script 标签的内容应该被大多数浏览器忽略.

<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)] + ')'});

W3C 4.3 脚本 HTML5 说:

<块引用>

如果有 src 属性，则元素必须为空或仅包含也匹配脚本内容的脚本文档限制.

我相信早期版本也是如此.

如果您在本地文件系统上工作，请确保将 jQuery 的 URL 更改为 http:// 而不是 //.

此外，通过调用文档就绪，确保在#background 元素存在时执行您的脚本.

这个例子即使在本地也应该可以工作:

<头><style type="text/css">#背景 {位置:固定；左:0px；顶部:0px；背景尺寸:100%；宽度:100%；高度:100%；-webkit-user-select:无；-khtml-user-select: 无；-moz-user-select:无；-o-用户选择:无；用户选择:无；z-索引:9990；}</风格><script src="http://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)] + ')'});});<身体><div id="背景"></div><div class="容器">

I'm attempting to to randomly load an image each time a user visits the site. I've followed a tutorial and a couple of previous threads on the issue and can't seem to get it working. The images are in the /images/ folder and the filenames are correctly entered into the array: 

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

I've then entered the div in the body of the page, but to no avail:

<body>

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

</div>
</body>

Where am I going wrong?

解决方案

You must have comma separators between the array values when you define your array.

You should also have two separate script elements, one for including jquery and the other for your code.

The content of a script tag with a src-attribute should be ignored by most browsers.

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

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

And the same is true for earlier versions I believe.

Edit:

If you are working on the local file system , make sure to change the URL to jQuery to http:// instead of just //.

Also, make sure your script is executed when the #background element exists by calling in on document ready.

This example should work even locally:

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

这篇关于刷新时的随机背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆