0

我正在尝试随机化背景中的图像，我遇到了问题，因为 div 中已经有内容

这就是我到目前为止所得到的

        <div class="welcome-inner">
        <script type="text/javascript">
<!--
 var imlocation = "welcome/";
 var currentdate = 0;
 var image_number = 0;
 function ImageArray (n) {
   this.length = n;
   for (var i =1; i <= n; i++) {
     this[i] = ' '
   }
 }
 image = new ImageArray(3)
 image[0] = 'background1.jpg'
 image[1] = 'background2.jpg'
 image[2] = 'background3.jpg'
 var rand = 60/image.length
 function randomimage() {
    currentdate = new Date()
    image_number = currentdate.getSeconds()
    image_number = Math.floor(image_number/rand)
    return(image[image_number])
 }
 document.write("<img src='" + imlocation + randomimage()+ "'>");
//-->
</script>

CONTENT

</div>

div welcome-inner 已经在 css 中有样式

.row-welcome {
border-bottom: 0;
width: 100%;
margin: 0 auto;
overflow: auto;
margin-top: -20px;
background-position: 50% 50%;
background-size: cover;
border-bottom: 1px solid #1e346a;
}

welcome-inner 确实有背景图片，但我删除了该行以尝试使其正常工作

我遇到的问题是图像正在显示，但我的内容被向下推。

我如何调整它以使其工作？

4

2 回答 2

0

您将需要设置背景图像样式（如果您使用 jQuery，这将更容易）。因此，与其创建一个进入正常文档流的标签，不如这样：

$("#welcome-inner").style("background-image", imlocation + randomimage());

并更改"#welcome-inner"为要设置背景图像的 DOM 元素的选择器。

于 2013-10-01T22:42:39.310 回答
0

我认为你的整个方法是不正确的。尝试使用.sort()，例如：

var doc = document;
function E(e){
  return doc.getElementById(e);
}
function range(least, greatest){
  var r = [];
  for(var i=0,n=least; n<=greatest; i++,n++){
    r[i] = n;
  }
  return r;
}
var rng = range(1, 3);
rng.sort(function(){
  return Math.round(Math.random())-0.5;
});
for(var i in rng){
  var img = new Image();
  img.src = 'welcome/background"+rng[i]+".jpg';
  //  If you add an id called pickAnId to your welcome-inner className div then
  E('pickAnId').appendChild(img);
}
于 2013-10-01T23:17:32.470 回答