为标签

Question

如何为此代码添加自动播放功能？ 例如，每5秒更改一次内容。 我编写这些代码来创建jquery选项卡，但我无法为其添加自动播放功能。

＆＃13;

＆＃13;

(function(e) {
    e(function() {
        e("div.tabs").on("mouseover", "div:not(.current)", function() {
            e(this).addClass("current").siblings().removeClass("current").parents("div.tab-block").find("div.box").eq(e(this).index()).fadeIn(150).siblings("div.box").hide()
        })
    })
})(jQuery)

＆＃13;

.box {
  display: none;
}
.current {
  font-weight: 700;
}
.visible {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-block">

<div class="tabs">
<div class="tab item current">tab1</div>
<div class="tab item">tab2</div>
<div class="tab item">tab3</div>
<div class="tab item">tab4</div>

</div>

<div class="box big-cover-box visible">Content1</div>
<div class="box big-cover-box">Content2</div>
<div class="box big-cover-box">Content3</div>
<div class="box big-cover-box">Content4</div>

</div>

＆＃13;

＆＃13;

＆＃13;

任何人都可以帮助我吗？感谢...

Answer 1

您可以使用.queue()，.delay()，.promise()，.then()，.add()，.eq()，.removeClass()，{{ 1}}，.addClass() .end()，递归

＆＃13;

＆＃13;

.filter()

＆＃13;

$(function() {
  var boxes = $(".box"),
    tabs = $(".tab");

  function showTabContent() {
    return boxes.queue("tabs", $.map(boxes, function(el, curr) {
      return function(next) {
        boxes.hide() // hide `.box` elements
          .add(tabs) // add `.tabs` to current selector
          .removeClass("current") // remove `.current` class
          .filter(el) // current `.box` element
          .fadeIn(150) // fade in current `.box` element
          .add(tabs.eq(curr)) // add `.tabs` at index `curr` to selector
          .addClass("current") // add `current` `className` to selector
          .end() // end current selection at `.boxes` selector
          .delay(5000, "content") // set, delay `"content"` queue 5000ms
          .dequeue("content") // dequeue `"content"` queue
          .promise("content") // at completed promise of `"content"` queue
          .then(next) // call next function in `"tabs"` queue
      }
    }))
    .dequeue("tabs") // dequeue `"tabs"` queue
    .promise("tabs") // at completed promise of `"tabs"` queue
    .then(showTabContent); // call `showTabContent` recursively
  }
  showTabContent();
});

＆＃13;

.box {
  display: none;
}

.current {
  font-weight: 700;
}

＆＃13;

＆＃13;

＆＃13;