0

我只是将自己投入到 javascript、jQuery 池中，并找到了一些可能的替代解决方案，但我想看看是否有一种方法可以使用我正在使用的现有 javascript 实现淡入/淡出。

现在是使用以下脚本在主要区域 onclick （实际站点是 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>

您可以在此处看到一个基本测试：http: //www.souldesigngroup.com/client/miguel/editorial/

我尝试了多种不同的方法来实现它，并得到了一些建议，但到目前为止，它们都没有以任何形式发挥作用。所以任何想法，建议，解决方案将不胜感激。

我知道还有其他选择，我可能会求助于其中一个进行重建，但除了淡入淡出之外，它的设置和工作都很完美。

预先感谢您的任何帮助！-索伦

4

1 回答 1

1

如果您愿意使用 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>

jQuery

$(function() {
    $('ul.thumbs a').click(function() {
        var rel = $(this).attr('rel');
        $('div.photo').fadeOut(500, function() {
            $('div#'+rel).fadeIn(500);
        });
        return false;
    });
});
于 2009-12-08T23:04:39.097 回答