У <aside>
нет события onload
. Оно есть у <body>
.
Таким, образом, если Весь Ваш код обернуть в функцию window_onload()
. Добавить Вызов этой функции в body onload
, исправить код с if (url == 4) {
на if (url == images.length) {
и вынести неизменяемую часть sliders.style.backgroundRepeat = "no-repeat";
в css, то получим следующую картину
function window_onload() {
var sliders = document.getElementById('fh5co-aside');
var images = [
'https://upload.wikimedia.org/wikipedia/ru/thumb/1/1b/Simpsons.png/250px-Simpsons.png',
'http://www.vladtime.ru/uploads/posts/2017-10/1508961509_obschaya.png',
'http://www.vladtime.ru/uploads/posts/2017-10/1508961555_tramp-1.png'
];
var url = 0;
setInterval(function() {
url += 1;
if (url == images.length) {
url = 0;
}
sliders.style.backgroundImage = 'url(' + images[url] + ')';
}, 1000);
}
#fh5co-aside {
background-repeat: "no-repeat";
}
<body onload="window_onload()">
<aside id="fh5co-aside" role="sidebar" class="text-center">
<h1 id="fh5co-logo"><a href="index.html">launcher</a></h1>
</aside>
</body>
Плавно менять картинки, можно вставив в <aside>
<div>
и менять у этого <div>
opacity
function window_onload() {
var sliders = document.getElementById('fh5co-aside');
var slidersInner = document.getElementById('fh5co-div');
slidersInner.style.opacity = 0;
var images = [
'https://upload.wikimedia.org/wikipedia/ru/thumb/1/1b/Simpsons.png/250px-Simpsons.png',
'http://www.vladtime.ru/uploads/posts/2017-10/1508961423_braziliya-germaniya.png',
'http://www.vladtime.ru/uploads/posts/2017-10/1508961555_tramp-1.png',
'http://www.vladtime.ru/uploads/posts/2017-10/1508961522_gitar-hiro.png'
];
var url = 0;
slidersInner.style.backgroundImage = 'url(' + images[url] + ')';
setInterval(function() {
if (slidersInner.style.opacity > 0.99) {
sliders.style.backgroundImage = slidersInner.style.backgroundImage;
url++;
if (url == images.length) {
url = 0;
}
slidersInner.style.backgroundImage = 'url(' + images[url] + ')';
slidersInner.style.opacity = 0;
}
var op = Number.parseFloat(slidersInner.style.opacity);
slidersInner.style.opacity = op + 0.1;
}, 200);
}
#fh5co-aside,
#fh5co-div {
background-repeat: "no-repeat";
width: 200px;
height: 200px;
}
<body onload="window_onload()">
<aside id="fh5co-aside" role="sidebar" class="text-center">
<div id="fh5co-div">
</div>
</aside>
</body>