jquery使用计时器和悬停迭代列表图像

Question

我有一个列表，其中 li 有 img。图像是缩略图，还有另一个 div 应该迭代大版本的缩略图。此外，当用户在缩略图上移动时，大图像迭代应该停止并显示悬停的内容。

我的悬停工作正常，但迭代和时间不正常。我遗漏了一些东西，并不感到惊讶，因为这确实突破了我对 noob 静态页面的能力的限制！

简单的html：

<ul>
 <li><img src='blah' />text</li>
 <li><img src='blah' />text</li>
</ul>
<div ='big'></div>

jquery:

$(document).ready(function(){

    $('li img').each(function (i) {
        var thumb = $(this).attr("src");
        setTimeout(function () { 
            $('#big').html('<img src=' + thumb + '/>');

            }, 5000 * (i + 1));
    });

    imgHov();

});

function imgHov(){
    $('li img').hover(
        function(){
            $('#big').html('<img src=' + $(this).attr("src") + '/>');
        },
        function(){
            $('#big').html("");
        }
        );

};

我准备完全重建这个东西；我尝试使用 jquery .map() 和其他将列表转换为数组而不是 .each 的方法。让我知道您的专家将采取的方向。谢谢！

Answer 1

这是我为你做的，你看看...

现场演示：

http://jsfiddle.net/oscarj24/XcZBq/

只是想知道，我没有使用setTimeout，而是使用setInterval，并为此添加一些逻辑，仅此而已。

希望这会有所帮助。