Javascript 自动循环浏览图像，并在链接hover-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>

这是

任何帮助都将不胜感激

问题是currentExperienceIndex每次都会上升，但从未重置。我将此添加到cycleImages函数的顶部：

    if(currentExperienceIndex >= 2){
        currentExperienceIndex = 0;
    } else {
    currentExperienceIndex += 1;
    }

见更新：

---

非常感谢。这正是我需要的。

    if(currentExperienceIndex >= 2){
        currentExperienceIndex = 0;
    } else {
    currentExperienceIndex += 1;
    }