javascript - 循环图像并在悬停时停止 - jQuery

Question

我正在尝试创建一个图像循环，当您将鼠标悬停在一个链接上时，它会明智地显示相关图像索引，例如，如果您将鼠标悬停在第 4 个链接上，则会显示第 4 个图像并且循环停止，当您将鼠标悬停时没有任何链接或鼠标离开，然后循环再次开始。

我做了一个简单的 fiddle 来尝试解释我的想法，只是我不太明白。感谢您的帮助。

http://jsfiddle.net/Q4ajK/3

jQuery

$('#vennD li:gt(0)').hide();

intervalId = setInterval(function() {
 $("#vennD li:first-child").fadeOut(500).next("li").fadeIn(500).end().appendTo("#vennD")
}, 1000);


$( '.targ' ).hover(function() {

    var tabIndex = $(this).index();

    $('#vennD li').hide();


    $('#vennD li').eq(tabIndex).addClass("show").show();

    clearInterval(intervalId);

}, function() {

    $('#vennD li').removeClass("show");

    intervalId = setInterval(function() {
 $("#vennD li:first-child").fadeOut(500).next("li").fadeIn(500).end().appendTo("#vennD")
}, 1000);

}); 

Answer 1

您代码中的问题是您实际上是在移动 <li>在<ul>里面.

因此，当您悬停第一个链接时，第一个 <li>不一定是对应的。

我已经在你的 jsFiddle 上更新了你的代码(+ 添加了一些颜色...:D)，你可以在这里查看我的解决方案:http://jsfiddle.net/Q4ajK/4/

完整代码如下:

HTML

<ul id="vennD">
    <li><img src="http://www.placehold.it/100x100/D00" /></li>
    <li><img src="http://www.placehold.it/100x100/0D0" /></li>
    <li><img src="http://www.placehold.it/100x100/00D" /></li>
    <li><img src="http://www.placehold.it/100x100/0DD" /></li>
    <li><img src="http://www.placehold.it/100x100/DD0" /></li>
</ul>
<div>
    <a href="#" class="targ" style="color: #D00">link</a>
    <a href="#" class="targ" style="color: #0D0">link</a>
    <a href="#" class="targ" style="color: #00D">link</a>
    <a href="#" class="targ" style="color: #0DD">link</a>
    <a href="#" class="targ" style="color: #DD0">link</a>
</div>

Javascript

// Initialization
$('#vennD li:first').addClass('show');
$('#vennD li:gt(0)').hide();

function loopImages() {
    // Retrieve the currently shown <li>, try to find the next <li>
    var next = $("#vennD li.show").next('li');
    // If not foudn, then retrieve the first one in the list
    if (!next.length) next = $("#vennD li:first");
    // Remove ".show", and hide the current <li>
    $("#vennD li.show").removeClass('show').fadeOut(500);
    // Add ".show" and show next <li>
    next.addClass('show').fadeIn(500);
}

intervalId = setInterval(loopImages, 1000);

$('.targ').hover(function () {
    clearInterval(intervalId);
    var tabIndex = $(this).index();
    // Hide & remove ".show"
    $('#vennD li').hide().removeClass('show');
    // Add ".show" & display targeted <li>
    $('#vennD li').eq(tabIndex).addClass("show").show();
}, function () {
    intervalId = setInterval(loopImages, 1000);
});