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/

自动循环显示图像，并在链接悬停时换出--JQuery

1 个答案: