多个div之间的自动转换

Question

似乎仍然无法掌握它。我正在尝试使用背景图像在多个div之间创建平滑过渡。转型正在发挥作用，但远非顺利。请指教。

var divs = jQuery('.image');

function fade() {
    var current = jQuery('.current');
    var currentIndex = divs.index(current),
        nextIndex = currentIndex + 1;

    if (nextIndex >= divs.length) {
        nextIndex = 0;
    }

    var next = divs.eq(nextIndex);

    next.stop().animate({'opacity': 1}, 2500).addClass('current');

    current.stop().animate({'opacity': 0}, 2500).removeClass('current');
        setTimeout(fade, 2500);
    };

fade();

.image {
      width: 100%;
      height: 100%;
      top:0;
      display:none;
      background-size: cover;
      background-position:top;
    }
    .banner {
    width:100%;
    height:100%;
    }
.current {display:block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="banner">
    <div id="image-0" class="image current" style="background-image:url(http://doetinpop.wildscreen.nl/wp-content/uploads/2015/12/popkoor-32.jpg);"></div>
  <div id="image-1" class="image" style="background-image:url(http://doetinpop.wildscreen.nl/wp-content/uploads/2015/12/MG_6884.jpg);"></div>
  <div id="image-2" class="image" style="background-image:url(http://doetinpop.wildscreen.nl/wp-content/uploads/2015/12/MG_6893.jpg);"></div>
</div>