Изменить фоновое изображение div каждый раз обновлять страницу

В соответствии с тем, что я видел в Интернете, я должен иметь возможность изменять фоновое изображение div каждый раз при обновлении страницы с помощью этого скрипта javascript. По какой-то причине это не работает. Любая помощь будет оценена.Изменить фоновое изображение div каждый раз обновлять страницу

Это HTML-

<div class="home-intro show-for-medium-up" id="home-intro"> 
</div>

Это устанавливаемыми сотовыми

.home-intro{ 
    background-image: url("../images/1.png"); 
    background-color:grey; 
    height:500px; 
    color:$white; 
    text-align:center; 
    }

Это является JS

<script> 


function randomImage(){ 
    var images = [ 
    '../images/1.png', 
    '../images/2.png', 
    '../images/3.png']; 
    var size = images.length; 
    var x = Math.floor(size * Math.random()); 
    console.log(x); 
    var element = document.getElementsByClassName('home-intro'); 
    console.log(element); 
    element[0].style["background-image"] = "url("+ images[x] + ") no-repeat;"; 
} 

document.addEventListener("DOMContentLoaded", randomImage);

источник

2015-07-07 David Soler

Вероятно, отсутствуют кавычки внутри сгенерированного URL-адрес строки – Amit

Согласно примеру, вы дали, есть '1/3' вероятность того, что изображение не изменится, как вы полагаетесь на случайный(). Вы можете лучше иметь файл cookie, например 'document.cookie =" lastimg = 1 ";' если вы только что показали 1-е изображение. Теперь на загрузке страницы опустите эту опцию и используйте random(). – skbly7

Добавление свойства background-repeat (т. Е. No-repeat) недействительно для фонового изображения. Попробуйте '' url ("+ images [x] +"); "или, альтернативно, используйте' style ["background"] '. –

Я бы просто сделать

<body onload="randomImage()">`

и использовать

var x=Math.floor(size * Math.random());

document.getElementById("home-intro").style.backgroundImage = "../images/" + x + ".png";

EDIT:

Или JQuery

$(function(){ 
    var x=Math.floor(size * Math.random()); 
    $('#home-intro').css('backgroundImage', '../images/' + x + '.png'); 
});

источник

2015-07-07 19:41:53 wizloc

Я пробовал это, и он не работает для меня. Я использую угловое, а также , поэтому я не уверен, будет ли загружаться тело в порядке. Что это сработало очень хорошо, так это изменить фоновое изображение на задний план, как сказал предыдущий ответ. –

Единственная проблема в том, что вы пытаетесь установить no-repeat атрибута свойства background-image. no-repeat является признаком свойства background.

http://codepen.io/kevinfargason/pen/EjEeMa

источник

2015-07-07 20:02:28 fargie

Вы были совершенно правы. Я изменил фоновое изображение на задний план и теперь отлично работает. Спасибо за вашу помощь –

Изменить фоновое изображение div каждый раз обновлять страницу

ответ

Смежные вопросы