У меня есть готовый рабочий сайт начальной загрузки 4, который представляет собой галерею изображений.Работает нормально.Тем не менее, я никогда не оставляю его в покое, я хочу случайным образом изменить изображение jumbotron, когда на главную страницу загружено одно из 6 изображений, созданных для этой цели.
Используемый мной javascript не работает для jumbotron,Чтобы разобраться в проблеме, я создал простую html-страницу без ссылок cdn или jquery.Просто чистый HTML и CSS с тегом скрипта на странице.
Я могу легко переключать обычный файл изображения в тег изображения.Это прекрасно работает.Но переключить фоновое изображение в разделе div, фон которого установлен в CSS, не работает.
Я пробовал все варианты с переключателем DOM, но ничего не работает.
У меня есть3 вопроса:
1 / Может кто-нибудь, пожалуйста, дайте мне знать, что синтаксис javascript (не jQuery) для этого.
CSS предусматривает фон, а не background-image или backgroundImage, с URL-адресом, а не src, как тег img.Поэтому я предполагаю, что в JavaScript будет использоваться = url (путь к изображению).
Но я могу ошибаться или я могу пропустить набор скобок или что-то в этом роде.
ПосколькуCSS использует относительный путь, я предполагаю, что JavaScript будет делать то же самое.Добавление в корневую папку, похоже, ничего не дает, но это может быть остальная часть синтаксиса DOM-переключателя, вызывающая проблему.
2 / Я использую onLoad в теге body для вызова javascript.Это лучшая практика, или я должен использовать прослушиватель событий в файле javascript для отслеживания завершенной загрузки страницы.
3 / Есть ли лучший способ реализовать переключатель изображений?Я не ищу ничего необычного, но просто хочу убедиться, что я использую общую процедуру.
Мой HTML, который включает в себя весь CSS и JavaScript, выглядит следующим образом:
<!DOCTYPE html>
<html>
<head>
<style>
#header {
background: url("images/header02.jpg") center center no-repeat;
width: 100%;
height: 400px;
}
</style>
</head>
<body onLoad="myHeaderFunction()">
<img id="myImg" src="images/header05.jpg" width="900" height="200" alt="test image">
<section id="header"> </section>
<script>
function myHeaderFunction() {
var myImageArray = ["header01.jpg", "header02.jpg", "header03.jpg", "header04.jpg", "header05.jpg"];
var item = myImageArray[Math.floor(Math.random()*myImageArray.length)];
var myPath = "images/" + item;
document.getElementById("myImg").src = myPath;
document.getElementById("header").style.background = myPath;
}
</script>
</body>
</html>