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

Question

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

我的悬停功能可以正常工作，但迭代和计时却不能。我错过了一些东西，并不感到惊讶，因为这确实突破了我的菜鸟静态页面能力的极限!

简单的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 并为此添加了一些逻辑，仅此而已。

希望这有帮助。