1

我一直在寻找一种非常简单/轻量级的方法，只需单击缩略图即可切换更大图像的 src。

我还没有真正尝试过。这是最好的解决方案吗？

要交换的较大图像将具有相同的宽度但不同的高度。这会导致问题/我需要为此功能添加什么吗？用一个交换的背景图像和最大图像的高度做一个 div 会更好吗？

此外，有人说它只能工作一次（？？）......我需要它从某个图像开始，然后能够在缩略图单击时更改为 2-4 个其他图像。

感谢您的任何建议！我当然（显然）不是 Javascript 作家。

4

2 回答 2

7

您应该能够根据需要多次切换图像。

您引用的这段代码将#target 的图像源替换为#thumbs div 中链接的href。它应该可以正常工作。

<img id="target" src="images/main.jpg">

<div id="thumbs">
<a href="images/picture1_big.jpg"><img src="images/picture1_small.jpg"></a>
<a href="images/picture2_big.jpg"><img src="images/picture2_small.jpg"></a>
<a href="images/picture3_big.jpg"><img src="images/picture3_small.jpg"></a>
</div>

现在就宽度和高度而言，我很确定当您换出图像时，浏览器如何处理定义的宽度但未定义的高度存在一些跨浏览器兼容性问题。

在 Firefox 中，以下工作。普通的旧javascript，没有jquery：

<html>

   <head>

     <script type="text/javascript">
         function swap(image) {
             document.getElementById("main").src = image.href;
         }
     </script>

   </head>

   <body>

     <img id="main" src="images/main.jpg" width="50">

     <a href="images/picture1_big.jpg" onclick="swap(this); return false;"><img src="images/picture1_small.jpg"></a>
     <a href="images/picture2_big.jpg" onclick="swap(this); return false;"><img src="images/picture2_small.jpg"></a>
     <a href="images/picture3_big.jpg" onclick="swap(this); return false;"><img src="images/picture3_small.jpg"></a>

   </body>
</html>
于 2009-10-28T23:46:31.330 回答
2

此示例消除了单击缩略图后的加载时间：

HTML：

<div id="big-image">
    <img src="http://lorempixel.com/400/200/sports/1/">
    <img src="http://lorempixel.com/400/200/fashion/1/">
    <img src="http://lorempixel.com/400/200/city/1/">
</div>

<div class="small-images">
    <img src="http://lorempixel.com/100/50/sports/1/">
    <img src="http://lorempixel.com/100/50/fashion/1/">
    <img src="http://lorempixel.com/100/50/city/1/">
</div>

Javascript：

$(function(){
    $("#big-image img:eq(0)").nextAll().hide();
    $(".small-images img").click(function(e){
        var index = $(this).index();
        $("#big-image img").eq(index).show().siblings().hide();
    });
});

http://jsfiddle.net/Qhdaz/2/

于 2013-09-05T04:30:34.217 回答