javascript - Jquery 自动滑动列表

Question

我这里有一个 slider ，仅使用 HTML 和 CSS 构建，但它不是自动滑动的。我想也许一些 Jquery 会有所帮助。

我有一个淡入淡出功能，但它在变化时会变成黑色背景。我不喜欢这样!

    function InOut(elem) {
    var delayOn = 3000, // time each <li> should be visible
        delayOff = 0, // time between revealing each <li>
        fade = 1000; // fade duration

    // Pause, fade in, pause again, fadeout, then fire the callback
    elem.delay(delayOff).fadeIn(fade).delay(delayOn).fadeOut(function() {
        // If we're not on the last <li>
        if (elem.next().length > 0) {
            // Call InOut on the next <li>
            InOut(elem.next());
        }
        else {
            // Else go back to the start
        InOut(elem.siblings(':first'));
        }
    });
}

$(function() {
    // Hide all the li's
    $('#slider li').hide();
    // Call InOut to loop through them
    InOut($('#slider li:first'));
});

请看这个JSFiddle让我知道我该怎么做，滑动动画也可以，谢谢!

PS:想看只用CSS滑动效果如何，去掉de JS函数即可!

Answer 1

如果我正确理解您的问题，这可能是适合您的解决方案:

Demo Fiddle

看起来您的 #slideshow-inner CSS 已将背景设置为黑色，只需将其更改为您想要的颜色即可。

CSS:

#slideshow-inner {
    //current styles

    background-color: rgba(255,255,240,1);
}