Автоматическое переключение между изображениями, а также переключение при наведении ссылки - JQuery

Я работаю над веб-сайтом с серией изображений заголовков, которые выгружаются при наведении указателя мыши на элементы ссылок.

В последнее время меня попросили сделать циклы изображений автоматически, пока кто-то не нависнет над одной из ссылок, что затем приведет к тому, что заголовок будет заменен изображением, связанным с этой ссылкой.

С небольшой помощью мне удалось получить изображения для автоматической замены в последовательности один раз, но (по-прежнему являясь новичком в Javascript). Я не могу понять, как получить цикл, который произойдет бесконечно, пока кто-то не перейдет через один ссылок.

Вот мой Javascript:

$(function(){

  var allExperiences = $('[rel=experiences] > li a').map(function(){
    var $this = $(this)
    return $this.attr('data-name');
  });

  var currentExperienceIndex = 0;

  function cycleImages(){
    currentExperienceIndex += 1;
    var name = allExperiences[currentExperienceIndex];

    $('.banner').removeClass().addClass('banner ' + name);
  }
  setInterval(cycleImages,3000);

  $('[rel=experiences] > li a').hover(function(e) {
    var $this = $(this);
    var name = $this.attr('data-name');
    var banner = $this.closest('[rel=banner]');
    banner.removeClass().addClass('banner ' + name);
  });

})

И мой HTML (пример):

<div class="banner kitten1" rel="banner">
<figure>
    <img class="kitten1" src="http://s21.postimg.org/bmspmlsib/kitten_1.jpg">
    <img class="kitten2" src="http://s30.postimg.org/dd9km289p/kitten_2.jpg">
    <img class="kitten3" src="http://s17.postimg.org/yjxc8tdnf/kitten_3.jpg">
</figure>
<div class="home-banner-icons">
    <ul class="experiences" rel="experiences">
        <li><a href="#" data-name="kitten1"><span class="icon-events"></span>Kitten 1</a></li>
        <li><a href="#" data-name="kitten2"><span class="icon-websites"></span>Kitten 2</a></li>
        <li><a href="#" data-name="kitten3"><span class="icon-retail"></span>Kitten 3</a></li>
    </ul>
</div>

И вот мой CSS:

.banner {
    background:#000;
    width:100%;
    background:#fff;

}

.banner figure {
    width:100%;
    position:relative;
    overflow:hidden;
}


.banner figure img {
    display:none;
    margin:0 auto;
    opacity:0;
    -webkit-animation:fade-in .75s ease-in-out forwards;
    -moz-animation:fade-in .75s ease-in-out forwards;
    -ms-animation:fade-in .75s ease-in-out forwards;
    -o-animation:fade-in .75s ease-in-out forwards;
    animation:fade-in .75s ease-in-out forwards;
}

.banner.kitten1 figure img.kitten1,
.banner.kitten2 figure img.kitten2,
.banner.kitten3 figure img.kitten3 {
    display:block;
    opacity:1;
}

/* style for usability */

.experiences li {
    float:left;
    padding:20px;
    list-style-type: none;
}

Вот скрипка!

Любая помощь приветствуется!