为选项卡添加自动播放功能

Question

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

(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)

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

<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>

谁能帮帮我？谢谢...

Answer 1

您可以使用 .queue()、.delay()、.promise()、.then()、.add()、.eq()、.removeClass()、 .addClass()、.end() .filter()、递归

$(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();
});

.box {
  display: none;
}

.current {
  font-weight: 700;
}

<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">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">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>

为选项卡添加自动播放功能

Add autoplay feature to tabs

javascript

jquery

tabs

autoplay