Javascript 将缩略图图像切换为淡入淡出

我刚刚开始投身于javascript、jQuery池，并找到了一些可能的替代解决方案，但我想看看是否有一种方法可以使用我正在使用的现有javascript实现fadeIn/fadeOut

现在是缩略图使用以下脚本在单击主区域（实际站点为onmouseover）时切换图像：

    function switch_product_img(divName, totalImgs) {
        for (var i=1; i<=totalImgs; i++) {
            var showDivName = 'photo_' + i;
            var showObj = document.getElementById(showDivName);
            if (showDivName == divName)
                showObj.style.display = 'block';
            else
                showObj.style.display = 'none';             
            }
        }
    </script>

功能开关\u产品\u img（divName，totalImgs）{
对于（var i=1；i如果您愿意使用jQuery并对HTML进行一些修改，我有一个解决方案

HTML

<div class="photo" id="photo_1">...</div>
<div class="photo" id="photo_2">...</div>
<div class="photo" id="photo_3">...</div>

<ul class="thumbs">
    <li><a href="#" rel="photo_1"><img src="..." /></a></li>
    <li><a href="#" rel="photo_2"><img src="..." /></a></li>
    <li><a href="#" rel="photo_3"><img src="..." /></a></li>
</ul>

谢谢Tatu，效果很好，我只需要在定位等方面下功夫。但是我注意到每个图像都有3次淡入淡出，知道是什么原因吗？再次感谢
$(function() {
    $('ul.thumbs a').click(function() {
        var rel = $(this).attr('rel');
        $('div.photo').fadeOut(500, function() {
            $('div#'+rel).fadeIn(500);
        });
        return false;
    });
});