Случайное фоновое изображение при обновлении

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

Я сейчас следуя учебник: 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.

И то же самое верно и для более ранних версий, я считаю.

Edit:

Если вы работаете в локальной файловой системе, убедитесь, чтобы изменить URL, чтобы 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

Спасибо, я внесла поправки в эти ошибки вместе с ошибками, отмеченными ишервудом и jacouh, но изображения по-прежнему не загружаются. – Hohohobo

Я создал скрипку, которая работает: http://jsfiddle.net/ffXUC/ - хотя трудно сказать, почему у вас нет. Вы проверили средства консоли браузера/веб-разработчика (F12 в Chrome) на наличие ошибок? – 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

Я уже дал свойства div ширины и высоты фона 100%, чтобы изображение заполнило экран: #background { \t позиция: исправлена; \t left: 0px; \t наверху: 0px; \t Размер фона: 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

Случайное фоновое изображение при обновлении

ответ

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