Question

我有一些关于如何做到这一点的概念，但可以真正使用“优化器”来告诉我该怎么做，所以它做得很好。

这是我的标记：

<span class="darkmark">
  <em class="active rnr">RR</em>
  <em class="apple">Apple Enthusiast</em>
  <em class="glasses">Glasses Wearer</em>
  <em class="html5">HTML5 User</em>
  <em class="wine">Wine Drinker</em>
</span>

这只是一个小图标列表，我想在个人大小的标题中循环。可爱吧？

我希望活动类每5秒左右移动到下一个兄弟。一旦所有的em已循环通过它返回到第一个并且该过程继续进行。

只是不知道我怎么做。我不希望任何用户交互触发它（没有悬停/点击）只是一旦页面加载它们开始循环。

我意识到这些应该是一个简单的结构，并计划很快进行调整。

Answer 1

一两天前有一个非常相似的问题，虽然我现在找不到它。我发布的解决方案看起来像：

var rotateSiblings = function() {
    var cur = $('.active');                    // find current "active", if any
    var next = $(cur).next();                  // find its next sibling
    if (next.length == 0) {                    // if there wasn't one...
        next = $('.darkmark').children().first(); // take the first one from the span
    }

    $(cur).removeClass('active');              // remove "active" from the current one
    $(next).addClass('active');                // and add it to the next one
}

setInterval(rotateSiblings, 5000);             // and do it all over every 5 seconds

编辑 - 此代码自首次发布后已更改。在http://jsfiddle.net/raybellis/UHWfC/

进行演示

Answer 2

尝试这样的事情：

function change_active() {
    var elements = $('.darkmark em');
    var count = elements.length;
    var active = $('.darkmark em.active');
    var next = (active.index() + 1) % count;
    active.removeClass('active');
    $(elements.get(next)).addClass('active');
}
setInterval(change_active, 5000);

看看它有效here。

Answer 3

See example

var darkmarkRotate = function () {
    var $this = $('.darkmark'),
        $em = $this.find('em'),
        $active = $this.find('em.active'),
        $next = ($active.next('em').length) ? $active.next('em') : $em.first();

    $active.fadeOut(500);
    $next.delay(500).fadeIn(500);

    setTimeout(function() {
        $active.removeClass('active');
        $next.addClass('active');
    }, 1000);

    setTimeout(darkmarkRotate, 5000);
};

darkmarkRotate();

jQuery延迟函数

3 个答案: