響應滑塊 - 如何幻燈片圖像

我已經實現了我的測試服務器上的響應滑塊之間的衰落時，不褪色背景： 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

響應滑塊 - 如何幻燈片圖像

回答

相關問題