添加/删除类每15秒使用jQuery并停止悬停。

我对jQuery并不擅长，我在这里难住，我试图制作一个基本上每15秒自动旋转一次并停止悬停的jQuery旋转木马。添加/删除类每15秒使用jQuery并停止悬停。

现在我有这样的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秒自动执行一次。

我在做什么错？ :)

来源

2016-02-02 Zackery Fretty

你在哪里尝试设置计时器？ –

还没有那么远。我熟悉做 - setInterval（function（）{ /// stuff }，5000）; 但不知道如何使它正确地循环通过子元素。 –

看看setInterval。 http://www.w3schools.com/jsref/met_win_setinterval.asp和可能。动画 – StealthSpoder

如果我有你的权利，试试这个：

补充一点： var loopCarousel = true;

当绑定悬停时，loopCarousel设置为false，它再次设置为true没有悬停时。将此函数添加到您的javascript中，并用正在显示的元素替换“your_selector”。

function start(counter){ 
    if(counter < 10000 && loopCarousel){ 
    setTimeout(function(){ 
     counter++; 

     $("your_selector").mouseover(); 

     start(counter); 
    }, 10000); 
    } 
} 
start(0);

来源

2016-02-02 22:37:37

除非我搞砸了，它看起来像是增加了电流，并且每隔10秒就将所有元素的电流消除 - 这也是我通过http://pastie.org/private/1oor6vwht6zzjwk6rd9qug获得的结果。我需要它添加到一个，拿走它，将它添加到下一个，重复。 –

引用“目前在悬停它添加”当前“在两个地方”这是因为你使用的选择器，返回几个对象，而不是一个。 $（“＃latest a”）将返回ID为“latest”的div下的所有。也许最好用你的整个代码制作一个JSFiddle，以便更容易理解。 –

添加/删除类每15秒使用jQuery并停止悬停。

回答

相关问题