添加/刪除類每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並停止懸停。

回答

相關問題