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;

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

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

      $("your_selector").mouseover();

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

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

1 个答案: