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

Add autoplay feature to tabs

本文关键字：自动播放 功能 添加 选项      更新时间：2023-09-26

如何在此代码中添加自动播放功能？例如，每 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>

有人可以帮助我吗？谢谢...

你可以

使用.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>

相关文章：