Javascript：單擊縮略圖可切換大圖。最好的方法？

Question

我一直在尋找一種非常簡單/輕巧的方法，只需單擊縮略圖即可切換較大圖像的src。

這就是我發現的內容： http : //snipplr.com/view/8688/jquery-image-swap/

我實際上還沒有嘗試過。 這是最好的解決方案嗎？

要交換的較大圖像將具有相同的寬度但具有不同的高度。 這會引起問題嗎/我需要為此功能添加一些東西嗎？ 最好將div與背景圖像互換並且最大圖像的高度是多少？

另外，有人說它只能工作一次（??）...我需要它從某個圖像開始，然后單擊縮略圖就可以更改為2-4個其他圖像。

感謝您的任何建議！ 我當然（顯然）沒有Javascript作家。

Answer 1

您應該可以根據需要多次切換圖像。

您所引用的代碼段將#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>

Answer 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/

Javascript：單擊縮略圖可切換大圖。最好的方法？

問題描述

2 個解決方案

解決方案1
6 已采納 2009-10-28 23:46:31

解決方案2
2 2013-09-05 04:30:34

Javascript：單擊縮略圖可切換大圖。 最好的方法？

問題描述

2 個解決方案

解決方案1 6 已采納 2009-10-28 23:46:31

解決方案2 2 2013-09-05 04:30:34

Javascript：單擊縮略圖可切換大圖。最好的方法？

解決方案1
6 已采納 2009-10-28 23:46:31

解決方案2
2 2013-09-05 04:30:34