Question

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

我的悬停东西正在运行，但迭代＆amp;时机不是。我错过了一些东西而且并不感到惊讶，因为这真的在推动我对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，只是为此设置了一些逻辑，就是这样。

希望这有帮助。

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

1 个答案: