Не вполне понял, чего вы хотите... Как-то так?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>timer</title>
<style>
.group1{
position: absolute;
z-index: 9;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function() {
var array = ["https://javascript.ru/cat/list/event.gif",
"https://javascript.ru/cat/list/donkey.gif",
"https://javascript.ru/cat/list/mobile.jpg",
"https://javascript.ru/cat/list/js.gif",
"https://javascript.ru/cat/list/event.gif",
"https://javascript.ru/cat/list/donkey.gif",
"https://javascript.ru/cat/list/mobile.jpg",
"https://javascript.ru/cat/list/event.gif",
"https://javascript.ru/cat/list/donkey.gif"].reverse(),
delay = 1000,
elem = $('.group1 img'),
currentIndex = 0;
var loop = setInterval(function() {
elem.attr("src",array[currentIndex]);
currentIndex++;
currentIndex = (currentIndex > array.length) ? 0:currentIndex;
console.log(currentIndex );
}, delay) ;
});
</script>
</head>
<body>
<div class="group1">
<img src = ""/>
</div>
</body>
</html>