在 div 列表中添加和删除类以创建内容滑块

Question

我在 CSS3 中创建了一个非常基本的内容滑块，但是这个问题是关于它的 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

Answer 2

如果我理解正确，您只想在堆栈中向上移动下一张幻灯片。这就是我要做的事情。 Working example on jsfiddle

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

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

    var slideInterval = setInterval(startSlideInterval, wait);

    $(slides).find('.slide').on({
        mouseover: function(){
            clearInterval(slideInterval);
        },
        mouseout: function(){
            slideInterval = setInterval(startSlideInterval, wait);
        }
    });

    function startSlideInterval() {
        var active = $(slides).find('div.active');
            nextSlide = $(active).next('.slide');
            lastSlide = $(slides).find('div.slide:last');

        $(active).removeClass('active');
        $(lastSlide).after($(active));
        $(nextSlide).addClass('active');
    }
 }

我无法评论暂停计时器，但我修改了我最初发布的代码并更新了 jsfiddle。