包括文本幻灯片之间的淡入淡出

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;
}