Question

我这里有一个滑块，仅使用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);
}

Jquery自动滑动列表

1 个答案: