javascript - 自动循环浏览图像并在链接悬停时换出 - JQuery

Question

我在一个网站上工作，该网站有一系列标题图片，当您将鼠标悬停在链接元素上时，这些图片会被换掉。

最近，有人要求我让图片自动循环播放，直到有人将鼠标悬停在其中一个链接上，这会触发标题与与该链接关联的图片交换。

在一些帮助下，有一次我设法让图像按顺序自动换出，但是(仍然是 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;
}

这是 a fiddle!

如有任何帮助，我们将不胜感激!

Answer 1

问题是 currentExperienceIndex 每次都会上升，但永远不会重置。我将其添加到您的 cycleImages 函数的顶部:

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

查看更新:

http://jsfiddle.net/4QRjR/4/