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

我一直在尋找一個非常簡單/輕量級的方式，只需點擊縮略圖即可切換較大圖像的src。Javascript：點擊縮略圖切換大圖。最好的方法？

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

我還沒有真正嘗試過了呢。這是最好的解決方案嗎？

要交換的較大圖像將具有相同的寬度但高度不同。這會導致問題/有什麼我需要添加此功能？做一個具有交換背景圖像的div並且是最大圖像的高度會更好嗎？

此外，有人說，它只能工作一次（??）...我需要它開始在某個圖像，然後能夠改變到2-4縮略圖點擊其他圖像。

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

來源

2009-10-28 McFly88

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

您引用的代碼片段將#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-28 23:46:31

爲未定義的高度問題，你認爲我關於使用div背景圖像交換的想法會更好嗎？謝謝你的回答！此外，jQuery不需要任何「內聯」的JavaScript，對嗎？那會是它的優勢嗎？ – McFly88 2009-10-29 00:25:36

任何人都可以告訴我如何修改第一個代碼來切換div背景圖像嗎？我會改變包含div的類，或者我可以直接改變背景圖像嗎？ – McFly88 2009-10-29 01:31:37

由於jQuery只是重新打包的javascript，它本質上是做同樣的事情，除了它是在代碼中分配「onclicks」。即$（「＃thumbs a」）。click（function（）...將點擊方法分配給#thumbs div中的每個'a'標籤，你也可以用普通的javascript做到這一點，通過使用getElementById和getElementByTagName，然後 – 2009-10-29 02:55:28

這個例子消除了加載時間點擊縮略圖後：

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-05 04:30:34

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

回答

相關問題