包括文本幻燈片之間的淡入淡出

Question

我正在嘗試使其在淡入淡出過程中具有滑動功能而不是僅箭頭鍵之間的淡入淡出。我非常感謝任何幫助。

頁面的鏈接是http://shahrukhkhanstuff.com/zentests/reachoutproject/index.php

這是我使用的JavaScript：

$(document.documentElement).keyup(function (e) { 
    var $activeslide = $('.slides.active'); 
    if (e.keyCode == 39) { 
     if ($activeslide.next('.slides').length) { 
      $targetslide = $activeslide.next('.slides'); 
     } 
     else {} 
    } 
    if (e.keyCode == 37) { 
     if ($activeslide.prev('.slides').length) { 
      $targetslide = $activeslide.prev('.slides'); 
     } 
     else {} 
    } 
    $targetslide.addClass('active'); 
    $activeslide.removeClass('active'); 
}); 

Answer 1

不知道如何使用刷卡，但這裏是你可以使用淡入淡出一個CSS解決方案。

.slides { 
    opacity: 0; 
    transition: 1s; 
    position: absolute; 
} 

.slides.active { 
    opacity: 1; 
}