响应滑块 - 如何幻灯片图像

我已经实现了我的测试服务器上的响应滑块之间的衰落时，不褪色背景： 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));

来源

2012-03-06 user723905

开关滑块可能是最好的选择 – charlietfl 2012-03-06 07:18:56

请提供链接到滑块插件的起源。您的演示链接目前遭受错误500 .. – 2012-03-07 16:23:58

褪色与不透明，因此不符合我的需求的是这一个：http：//responsive-slides.viljamis.com/...这是一个完美的罚款滑块，但！只是没有这个功能。我最终使用的是这一个：http://codecanyon.net/item/unoslider-responsive-touch-enabled-slider/657866 – user723905 2012-03-08 18:34:37

如果你想有一个无缝的淡入淡出，你不会褪色得到它。当节点消失时，它会消除不透明。通过线性渐变，在中途，两个节点都是半透明的。人们会认为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(); 
});

来源

2012-03-06 22:49:15

是的，谢谢你解释得那么清楚。我其实已经理解了所有这些，但是我现在还不够熟练地使用js或jquery来编辑核心插件代码本身。我在代码中重新排列了这些淡入淡出的痕迹，但明白为什么即使我做得正确，也不能达到我的目标。 Code Canyon上的UNO Slider必须使用不同的淡出方法，因为它效果很好。 slidejs aslo工作，因为它有一个额外的淡入淡出能力，但它在小设备上很jump jump。谢谢你的深思熟虑的答案！ – user723905 2012-03-07 15:52:20

响应滑块 - 如何幻灯片图像

回答

相关问题