2012-03-06 79 views
3

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

開關滑塊可能是最好的選擇 – charlietfl 2012-03-06 07:18:56

+0

請提供鏈接到滑塊插件的起源。您的演示鏈接目前遭受錯誤500 .. – 2012-03-07 16:23:58

+0

褪色與不透明,因此不符合我的需求的是這一個:http://responsive-slides.viljamis.com/...這是一個完美的罰款滑塊,但!只是沒有這個功能。我最終使用的是這一個:http://codecanyon.net/item/unoslider-responsive-touch-enabled-slider/657866 – user723905 2012-03-08 18:34:37

回答

2

如果你想有一個無縫的淡入淡出,你不會褪色得到它。當節點消失時,它會消除不透明。通過線性漸變,在中途,兩個節點都是半透明的。人們會認爲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(); 
}); 
+0

是的,謝謝你解釋得那麼清楚。我其實已經理解了所有這些,但是我現在還不夠熟練地使用js或jquery來編輯核心插件代碼本身。我在代碼中重新排列了這些淡入淡出的痕跡,但明白爲什麼即使我做得正確,也不能達到我的目標。 Code Canyon上的UNO Slider必須使用不同的淡出方法,因爲它效果很好。 slidejs aslo工作,因爲它有一個額外的淡入淡出能力,但它在小設備上很jump jump。謝謝你的深思熟慮的答案! – user723905 2012-03-07 15:52:20