macik,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.foto_index .bg{
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
-moz-background-size: 100%; /* Firefox 3.6+ */
-webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
-o-background-size: 100%; /* Opera 9.6+ */
background-size: 100%; /* Современные браузеры */
background-size:cover;
box-sizing: border-box;
transition: opacity .8s ease-in;
}
.foto_index .bg.show{
opacity: 1;
}
.foto_index{
width: 100%;
position: relative;
z-index: -2;
min-height: 600px;
margin-top: -50px;
margin-right: 0;
margin-left: 0;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
[].forEach.call(document.querySelectorAll(".foto_index"), function(el) {
var img = el.querySelectorAll(".bg"),
len = img.length,
i = len - 1,
p = el.dataset.pause || 5E3;
!function g() {
img[i].classList.remove("show");
i = ++i % len;
img[i].classList.add("show");
window.setTimeout(g, p)
}()
})
});
</script>
</head>
<body>
<div class="foto_index" data-pause="3000">
<div class="bg" style="background-image: url(http://img-fotki.yandex.ru/get/5640/35900228.10c/0_7388e_3ab59b4a_XL.jpeg.jpg)"></div>
<div class="bg" style="background-image: url(http://1.bp.blogspot.com/-aleHkBUuqOI/VY0HrCytsXI/AAAAAAAAq1g/f2emGtdqdWo/s640/2015-06-05_0145.jpg)"></div>
<div class="bg" style="background-image: url(http://www.fotki.ykt.ru/albums/userpics/2013/11-18/1384739526_image.jpg"></div>
</div>
</body>
</html>