1

我有一个列表，其中 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 的方法。让我知道您的专家将采取的方向。谢谢！

4

1 回答 1

3

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

现场演示：

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

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

希望这可以帮助。

于 2012-10-20T05:56:48.003 回答