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