AutoPlay-Funktion zu den Tabs hinzufügen

Question

Wie kann ich diesem Code eine automatische Wiedergabefunktion hinzufügen? Zum Beispiel ändern Sie den Inhalt alle 5 Sekunden. Ich schreibe diese Codes, um jquery Tabs zu erstellen, aber ich kann keine Auto-Play-Funktion hinzufügen.

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

Wer kann mir helfen? Dank ...

Answer 1

können Sie verwenden .queue(), .delay(), .promise(), .then(), .add(), .eq(), .removeClass(), .addClass(), .end().filter(), Rekursion

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