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 回答