oleg901,
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<!-- <link href="style.css" rel="stylesheet" type="text/css" /> -->
<style type="text/css">
.img1 {
background-color: #7e6497;
}
.img2 {
background-color: #d0ff00;
}
.img3 {
background-color: #00c8ff;
}
.img4 {
background-color: #001318;
}
#img {
width: 200px;
height: 200px;
margin: auto;
margin-top: 8%;
}
</style>
<style type="text/css">
header.c1 {
background-position: 50% 18px;
}
</style>
</head>
<body>
<div id='an'>
<header id="img" role="banner" class="c1"></header>
</div>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
<script>
$(function() {
var el = $("#img");
var imgMass = ["img1", "img2", "img3", "img4"];
var i = 0;
var timer;
el.addClass(imgMass[i]);
function show() {
window.clearTimeout(timer);
el.removeClass(imgMass[i]);
i++;
if (i == imgMass.length) i = 0;
el.addClass(imgMass[i]);
el.animate({
"opacity": "1"
}, 800);
timer = window.setTimeout(hide, 3E3)
}
function hide() {
el.animate({
"opacity": "0"
}, 800, show)
}
show();
el.mouseenter(function() {
window.clearTimeout(timer);
el.stop(true, false).css({
"opacity": "1"
})
}).mouseleave(function() {
el.stop(true, false);
hide()
})
});
</script>
</body>
</html>