javascript - 停止jQuery Fade Loop并添加悬停功能不起作用

我正在尝试在jQuery中实现淡入淡出循环

You can see it here

但这不符合我想要的方式。当我将鼠标悬停在point1上时，此代码只会停止Fade循环。

我希望代码以这样的方式工作：将鼠标悬停在这些点之一（point1，point2等）上时，淡入淡出循环将停止/暂停，并且仅显示指定的.trip，然后在鼠标悬停/鼠标悬停时，淡入淡出循环将从顶部开始。

例如：

如果将鼠标悬停在<div class="point2">Hover Point 2</div>上，则循环应停止，并且仅显示<div id="2" class="trip two">Item2</div>。或者，如果我在循环中将鼠标悬停在<div class="point1">Hover Point 1</div>上，则循环应停止并显示<div id="2" class="trip one">Item1</div>，并且一旦鼠标移出，循环应从顶部开始。

尝试了一堆东西，请帮忙。
我该如何解决？

最佳答案

这是我的看法：

HTML：

<div id="main">
    <div id="1" class="trip 1">Item1</div>
    <div id="2" class="trip">Item2</div>
    <div id="3" class="trip">Item3</div>
</div>
<hr>
<br/>
<div class="point" id="show1">Hover Point 1</div>
<br/>
<div class="point" id="show2">Hover Point 2</div>
<br/>
<div class="point" id="show3">Hover Point 3</div>

JS

var $elem = $('#main .trip'), l = $elem.length, i = 0;

function go() {
    $elem.eq(i % l).fadeIn(700, function() {
        $elem.eq(i % l).fadeOut(700, go);
        i++;
    })
}

go();

var tripToShow = 0;

$('.point').hover(function(){
    tripToShow = this.id.replace('show', '');
    $('.trip').stop(true).hide();
    $('#'+tripToShow).show();
},function(){
    $('.trip').hide();
    i = 1;
    tripToShow = 0;
    go();
});

小提琴：http://jsfiddle.net/stevoperisic/GKZ2F/