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：点击缩略图切换大图。最好的方法？

回答

相关问题