На страницах stackoverflow в одном из ответов был найден данный скрипт - смена фоновых изображений background-image
у указанного div
. Работает в целом как мне требуется под определенную задачу, но проблема в том, что скрипт после одного прохода останавливается. Подскажите пожалуйста, как изменить скрипт, чтобы он бесконечно повторял смену картинок?
var editBg = function(content__bg) {
var contents__bg = $('.content').find('.content__bg');
contents__bg.animate({opacity: 'hide'}, 500);
setTimeout(function() {
contents__bg.remove();
}, 500);
$('.content').prepend($('<div class="content__bg '+content__bg+'"></div>'));
};
$(function() {
setTimeout(function() {
editBg('content__bg_img--1');
}, 3000);
setTimeout(function() {
editBg('content__bg_img--2');
}, 6000);
setTimeout(function() {
editBg('content__bg_img--3');
}, 9000);
});
.content {
position: relative;
width: 220px;
height: 160px;
}
.content__bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: 100% 100%;
pointer-events: none;
}
.content__bg_img--0 {background-image: url('http://wp.widewallpapers.ru/2k/nature/forest/1920x1200/forest-wallpaper-1920x1200-004.jpg')}
.content__bg_img--1 {background-image: url('http://anywalls.com/pic/201210/1366x768/anywalls.com-14971.jpg')}
.content__bg_img--2 {background-image: url('http://www.1366x768.ru/nature/29/park-wallpaper-1366x768.jpg')}
.content__bg_img--3 {background-image: url('http://wp.widewallpapers.ru/2k/nature/forest/1920x1080/forest-wallpaper-1920x1080-003.jpg')}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="content__bg content__bg_img--0"></div>
</div>