Question

我正在使用此代码在一堆不同的div之间切换，但现在变化很快，我想做更多的快速淡化（可能就像底部的幻灯片显示：http://responsiveslides.com/ ）。这就是我现在所拥有的：

<script type="text/javascript">
function showDiv(idInfo) {
  var sel = document.getElementById('divLinks').getElementsByTagName('div');
  for (var i=0; i<sel.length; i++) {
    sel[i].style.display = 'none';
  }
  document.getElementById('container'+idInfo).style.display = 'block';
}
</script>

<div id="containerh"><a href="#" onclick="showDiv('1');return false"><img src="images/peach1.jpg" /></a></div>
<div id="container1"><a href="#" onclick="showDiv('2');return false"><img src="images/peach2.jpg" /></a></div>
<div id="container2"><a href="#" onclick="showDiv('3');return false"><img src="images/peach3.jpg" /></a></div>
<div id="container3"><a href="#" onclick="showDiv('4');return false"><img src="images/peach4.jpg" /></a></div>

Answer 1

尝试使用jQuery effects。作为一个例子（仅供参考，我在CodeAcademy上学到了这一点）：

$(document).ready(function(){
    $('div').click(function() {
        $('div').fadeOut('slow'); // alternatively use fadeIn
    });
});

Answer 2

简单的CSS + Javascript版本。使用CSS过渡。

»Fiddle«

当show()被调用时，显示图片编号i +隐藏上一个（如果有的话）。

var a = 0, img = null;
function show(i) {
    if (img)
        img.className = "hide";
    img = document.getElementById(a ? "img1" : "img2");
    a ^= 1;

    img.src = images[i];
    img.className = "show";
}

被叫：

<a href="#" onclick="show(3)">Picture 3</a>

CSS，主要部分：

两个图像占位符放在彼此的顶部。

img {
    transition: opacity 2s;
}
img.show {
    opacity : 1
}
.hide {
    opacity : 0;
}

这仅仅是一个划痕样本。

Div之间褪色

2 个答案:

»Fiddle«