选择时弹出的缩略图(javascript)

thumbnail image that pop when selected (javascript)

本文关键字：略图 javascript 选择      更新时间：2023-09-26

所以我想知道是否有可能，例如，我有一个图像列表，当我从它们中选择一个时，图像显示比另一个更大，而另一个则在缩略图中看到它，如果我选择另一个缩略图，大图像被我选择的那个取代等等…但在javascript(和html)?如果是这样，代码结构是什么?和不使用像jquery或类似的javascript代码生成器的东西;我想自己手动做它

谢谢

看看Lightbox jQuery插件。这可能就是你要找的

http://www.lokeshdhakar.com/projects/lightbox2/?u=91

你的意思是这样吗?(或者至少在正确的轨道上)

JSFiddle

HTML: 

<a href="http://placehold.it/500">http://placehold.it/500</a>
<a href="http://placehold.it/510">http://placehold.it/510</a>
<a href="http://placehold.it/520">http://placehold.it/520</a>
<a href="http://placehold.it/530">http://placehold.it/530</a>
<a href="http://placehold.it/540">http://placehold.it/540</a>
<a href="http://placehold.it/550">http://placehold.it/550</a>
<a href="http://placehold.it/560">http://placehold.it/560</a>
<a href="http://placehold.it/570">http://placehold.it/570</a>
<a href="http://placehold.it/580">http://placehold.it/580</a>
<a href="http://placehold.it/590">http://placehold.it/590</a>
<a href="http://placehold.it/600">http://placehold.it/600</a>
<div id="popup"><img src="" alt=""/></div>
JavaScript: 

var a = document.getElementsByTagName("a"),
popup = document.getElementById("popup"),
img = document.getElementsByTagName("img")[0];
for(i = 0; i < a.length; i++)
{
    a[i].onclick = function(){
        popup.style.display="block";
        img.src = this.href;
        img.alt = this.innerHTML;
        return false;
    }
}
相关文章：