javascript - 在 div 列表中添加和删除类以创建内容 slider

Question

我正在 CSS3 中创建一个非常基本的内容 slider ，但是这个问题是关于它的 jQuery 部分的。我的内容结构如下:

<div class="slider>
    <div class="container>
        <div class="slides">
            <div class="slide active"></div>
            <div class="slide"></div>
            <div class="slide"></div>
            <div class="slide"></div>
            <div class="slide"></div>
        </div>
    </div>
</div>

这些幻灯片的不透明度为 0，但是当 .active 时添加到幻灯片时，我将不透明度更改为 1。我想要完成的是每隔 x seconds 将事件类移动到每个 div。 .

if($('.slider').length) {
    // Element exists

    var height = $('.slide .col-md-8').outerHeight(),
        slide = $('.slide'),
        wait = 5000;

    $('.slides').css('height', height);

    slide.each(function() {

    });

}

这就是我能想到的。如果这还不够，我很抱歉，如果这很容易做到并且我只是在浪费你的时间，我也会道歉。我必须去某个地方学习。我希望我不会被否决，我正努力在这个很棒的开发者社区中建立我的代表。

Answer 1

将一个脚本示例放在一起，该脚本随时间顺序将类应用于元素并循环。这可以在您当前拥有的资源中实现。

var i = 1; // Counter
$slides = $('.slides > .slide'); // Array of slides
$num = $slides.length; // Number of present slides
wait = 5000; // Wait time

setInterval(function() {

    // If reached the last slide - reset to the first slide
    if (i++ == $num) {
        $('.slide').removeClass('active');
        $($slides[0]).addClass('active');
        i = 1;
    }
    else {
        // Add the active class to the next slide
        $('.active').removeClass("active").next().addClass('active');
    }
}, wait); // Time per slide in ms

Fiddle