我只是把自己投入到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>
您可以在此处看到基本测试:http://www.souldesigngroup.com/client/miguel/editorial/
我已经尝试了多种不同的方法来实现它,并且已经给出了一些建议,但到目前为止,它们都没有任何表现形式。所以任何想法,建议,解决方案都将不胜感激。
我知道有其他替代品,我可以选择使用其中一种进行重建,但除了淡入淡出之外,这种设置也很完美。
提前感谢您的帮助! -soren
答案 0 :(得分: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;
});
});