javascript - 制作一个简单的图像切换器

Question

我知道有很多 jQuery 脚本可以用来实现类似的东西，我正在尝试将它们组合在一起，但我想让它尽可能简单。基本上，当单击列表中的每个图像缩略图时，主图像会显示相应的图像，只是更大。

所以，这是我的问题。有人有一个简单的脚本可以做到这一点吗？

        <div class="main_image">
           <img src="<?=href['imagem'];?>" /> 
        </div>

        <ul>

            <li>
                <a href="img01.jpg"><img src="img01.jpg" alt="Image Name" /></a>
            </li>
            <li>
                <a href="img02.jpg"><img src="img02.jpg" alt="Image Name" /></a>
            </li>
        </ul>

Answer 1

这很简单，您可以将缩略图存储在名为“small”的文件夹中，将大图像存储在“large”中，然后您会得到如下内容:

<ul>

    <li>
        <img class="small" src="small/img01.jpg" alt="Image Name" />
    </li>
    <li>
        <img class="small" src="small/img02.jpg" alt="Image Name" />
    </li>
</ul>
<div class="main_image">
   <img id="large" src="" /> 
</div>

然后写下这样的内容:

$(".small").click(function(){
var src = $(this).attr("src").replace("small","large");
$("#large").attr("src",src);
})