Javascript 要出现的投资组合

我喜欢有一个动态的、易于更新的投资组合

在一个部分将有一些小正方形预览，悬停或单击这些预览将更新整个作业的大部分

我非常了解：

MM\u swapImage（）

，但我喜欢在jquery或ajax中这样做

我该怎么做

一些研究成果：

--

功能交换（pic1、pic2）
{
var pic1=document.getElementById（“pic1”）；
var pic2=document.getElementById（“pic2”）；
var pic1src=pic1.src；
var pic2src=pic2.src；
pic2.src=pic1src；
pic1.src=pic2src；
}

一个简单快捷的解决方案是将较大的文件名存储在

rel

标记中，并使用该标记交换页面上较大图像的源文件。您可以使用淡入淡出效果来扩展此功能，但我在此仅提供基本功能：

<img class="thumbnail" rel="image01-hr.jpg" src="image01-thumb.jpg" />
<img class="thumbnail" rel="image02-hr.jpg" src="image02-thumb.jpg" />
<img class="preview" src="image01-hr.jpg" />

$(".thumbnail").click(function(e){
  $(".preview").attr("src", $(this).attr("rel"));
});

$（“.缩略图”）。单击（函数（e）{
$（.preview”）.attr（“src”），$（this.attr（“rel”）；
});

这是我的代码（只是一个示例，它需要更改才能为您工作）

为图像创建一个文件夹。 这些小图像称为： image_1.jpg

较大的图像称为 悬停_image_1.jpg

（注意文件名前的“悬停”）

将鼠标悬停在图像上，它会将其源替换为新源（较大的图像），当您用鼠标离开图像时，旧源将恢复

“易于更新”和Ajax不容易结合在一起。我喜欢“易于更新”的方式作为一种工具来工作。第一个缩略图将命名为image01-thumb.jpg，hr版本将命名为image01-hr.jpg，因此，这样，当有25个图像时，该过程仍然有效！

<img class="thumbnail" rel="image01-hr.jpg" src="image01-thumb.jpg" />
<img class="thumbnail" rel="image02-hr.jpg" src="image02-thumb.jpg" />
<img class="preview" src="image01-hr.jpg" />

$(".thumbnail").click(function(e){
  $(".preview").attr("src", $(this).attr("rel"));
});

$('#imageswitch img').hover(
                function () {
                    var oldsource = $(this).attr('src');
                    var foldername = oldsource.substr(0, oldsource.lastIndexOf('/'));
                    var filename = oldsource.replace(foldername+'/','');
                    var newsource = foldername + '/' + 'hover_' + filename;
                    $(this).attr('src', newsource);
                    $(this).data('src', oldsource);                   
                }, 
                function () {
                    $(this).attr('src', $(this).data('src'));
                }
            );