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

我正在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>

---

这就是我能想到的。如果这还不够，我很抱歉，如果这很容易做到，我也会道歉，我只是在浪费你的时间。我得去哪儿学。我希望我不会被否决，我正在努力与这个令人敬畏的开发人员社区建立我的代表。

提供了一个脚本示例，该脚本将类按时间顺序应用于元素，并循环。这可以在您当前拥有的内容中实现

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

---

如果我理解正确，可以说你只想在堆栈中向上移动下一张幻灯片。我会这样做的

---

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

看起来您有了一个好的开始。你被什么卡住了？建议您下一步可以研究使用setInterval（）。感谢您的评论帮助我理解逻辑。这帮助我实现了滑动。有没有办法暂停鼠标悬停的循环？这不是一个要求，但只是想了解它。您不能直接“暂停”

setInterval

，但可以停止它，然后重新启动它。需要对语法进行一些小的更改，但应该会有帮助。谢谢你的回答。不过，我已经接受了Chris的回答。不过也谢谢你给我看这条路！

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

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