Question

我在测试服务器上实现了Responsive Slider： http://test-orange.com/resp/

如果您观看幻灯片放映，您会看到每张幻灯片淡出并且下一张幻灯片淡入时，背景显示在淡入淡出期间。

我不希望背景显示如下。我希望每张幻灯片图像都能在下一张图像中淡出淡出。

任何人都知道如何修改responsiveslides.js代码来执行此操作？我认为这是需要编辑的部分：

      if (settings.auto === true) {
        setInterval(function () {
          $this.find(':first-child').fadeOut(fadetime, function () {
            $(this).css(hidden);
          }).next($slide).fadeIn(fadetime, function () {
            $(this).css(visible);
          }).end().appendTo($this);
        }, parseFloat(settings.speed));

Answer 1

如果你想要无缝淡化，你就不会褪色。当节点淡出时，它会失去不透明度。对于线性淡入淡出，在中途，两个节点都是半透明的。人们会假设50％+ 50％将总和为100％并且给出完全不透明的图像混合五十五，但这是轻的，而不是橙子，它不是这样的总和。光线就像这样：

opacity = layerA + (layerB * layerA)

你最终得到的是75％的不透明度，这就是剩下的25％背景在褪色中间从下面渗透的原因。这就是交叉淡化的作用。对于扩展推理，请参阅此question and its answer(s)。

为了实现100％不透明度的平滑过渡，您需要一种不同的技术。你需要淡入新的幻灯片，而不会褪色。它保持在100％，这样背景没有机会。下一张幻灯片淡入后，您将隐藏前一张幻灯片。

一般来说，而不是：

$previous.fadeOut(fadetime);
$next.fadeIn(fadetime);

你需要这个：

$next.fadeIn(fadetime, function(){
    $previous.hide();
});

自适应滑块 - 在幻灯片图像之间淡入淡出时如何不淡入背景

1 个答案: