使用 jQuery 每 15 秒添加/删除一个类，并在悬停时停止

Question

我不擅长jQuery，我在这里被难住了，我正在尝试制作一个jQuery轮播，它基本上每15秒自动旋转一次，并在悬停时停止。

现在我有这个 HTML ：

<section id="featured">
   <div id="hero">
        <div class="slide" style="background-image: url(/wp-content/uploads/2016/02/rsz_shutterstock_323582282.jpg)"></div>
        <div class="slide" style="background-image: url(/wp-content/uploads/2016/01/rsz_shutterstock_246059269.jpg)"></div>
        <div class="slide" style="background-image: url(/wp-content/uploads/2016/01/rsz_shutterstock_342971345.jpg)"></div>
        <div class="slide" style="background-image: url(/wp-content/uploads/2016/01/rsz_shutterstock_327686162.jpg)"></div>
    </div>
    <div class="wrap clearfix" id="latest-wrap">
        <div class="clearfix" id="latest">
            <h5 id="the-latest"><span>Hot This Week</span></h5>
            <a href="/get-all-nine-quicktips-here/" class="">
            <article class="featured-article clearfix">
                <h4><span class="fa finance-101"></span>finance-101</h4>
                <h2 class="featured-title">Our Best Financial Tips to Watch On The Go</h2>
            </article>
            </a>        
            <a href="/how-to-throw-the-perfect-wedding-shower/" class="">
            <article class="featured-article clearfix">
                <h4><span class="fa fun"></span>fun</h4>
                <h2 class="featured-title">How to Throw the Perfect Bridal Shower</h2>
            </article>
            </a>    
            <a href="/watch-the-full-series-of-ytf-with-dennis-kneale/" class="">
            <article class="featured-article clearfix">
                <h4><span class="fa finance-101"></span>finance-101</h4>
                <h2 class="featured-title">If You're Reading This It's Not Too Late</h2>
            </article>
            </a>                
            <a href="/watch-the-full-season-of-mr-and-mrs-adventure-here/" class="">
            <article class="featured-article clearfix">
                <h4><span class="fa motivation"></span>motivation</h4>
                <h2 class="featured-title">Watch One Couple Travel the World on $1k a Month</h2>
            </article>
            </a>                                                    
        </div>
    </div>
</section>

这是我对jQuery的内容...

$("li.categories").click(function(){
    window.location = $(this).find("a").attr("href");
});
$("#featured #hero .slide").eq(0).addClass("current");
$("#latest a").eq(0).addClass("current");
$("#latest a").hover(function(){
    $(this).addClass("current");
    $("#featured #hero .slide.current").removeClass("current");
    $("#featured #hero .slide").eq($("#latest a.current").index()-1).addClass("current");
}, function(){      
    $(this).removeClass("current");
});

目前在悬停时，它会在两个地方和停止处添加"当前"，这很好，但是，我希望它每 10 秒自动执行此操作。

我做错了什么？:)

Answer 1

如果我

猜对了，试试这个：

添加这个： var loopCarousel = true;

绑定悬停时，将循环轮播设置为 false，不悬停时再次设置为 true。将此函数添加到您的 javascript 中，并将"your_selector"替换为正在显示的元素。

function start(counter){
  if(counter < 10000 && loopCarousel){
    setTimeout(function(){
      counter++;
      $("your_selector").mouseover();
      start(counter);
    }, 10000);
  }
}
start(0);