Есть Html страничка с css файлом.
<div> <p id="head_img">Text with background</p> </div>
#head_img{
background: url('backgrounds/back1.jpg');
}
в папке backgrounds находится 3 файлa .jpg (back1.jpg, back2.jpg и back3.jpg) Нужно с помощью Js сделать так, чтоб элемент с фоном изменял фон на следующий из папки backgrounds каждые 10 секунд, плюс возникла необходимость делать это плавно.
var intervalID = window.setInterval(setBack, 10000);
var i = 1
var files = 3
var file_url = ''
function setBack() {
file_url = "background: url(backgrounds/back", i, ".jpg);"
document.write(file_url);
document.getElementsByClassName('background')[0].style = file_url
i ++
if (i > files){
i = 0
}
}
первая проблема, не нахожу информации на счет того как вставлять номер файла в текст. Да и к тому же нужно придумать как сделать плавный переход между картинками через размытие. потому что в таком расположении они сменяются резко. что сильно режет глаз