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);
})

Answer 2

非常简单，您实际上可以稍微简化一下代码。

http://jsfiddle.net/yeGxq/

<div class="main_image">
   <img id="main" src="" /> 
</div>

//dont put <a> tags around images because you will just need to cancel navigation    
<ul>
    <li>
        <img src="http://placehold.it/200x300" alt="Image Name" />
    </li>
    <li>
        <img src="http://placehold.it/300x400" alt="Image Name" />
    </li>
</ul>

//when a list item image is clicked, take your main image and change its src attr
$('li img').click( function() {
    $('#main').attr('src', $(this).attr('src'));
});

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

2 个答案: