Warum setInterval nicht nach der letzten Iteration anonym aufruft

Ich beginne gerade mit Javascript/jquery und versuche, eine sehr einfache Diashow zu machen. Grundsätzlich sind img/slides absolut übereinander in einem Container positioniert, z-index legt die Stapelreihenfolge fest, wird über jquery gesetzt und ruft danach alle 1,5sec eine anonyme Funktion auf, die die obere Folie ausblendet, um die untere Folie freizulegen.Warum setInterval nicht nach der letzten Iteration anonym aufruft

function slide_play(){ 
 
\t var slides = $('.slider ul li'); 
 
\t var no_of_slides = slides.length; 
 

 
// Set Slides in Order 
 
\t for(z=99, i=0; i<no_of_slides; i++) { 
 
\t \t $(slides[i]).css('z-index', z); 
 
\t \t z--; 
 
\t } 
 

 
\t var i = 0; 
 
\t var first_item = $(slides[0]); 
 
\t var last_item = $(slides[no_of_slides-1]); 
 
    var curr_item = first_item; 
 

 
\t setInterval(function() { 
 
\t \t $(curr_item).fadeOut('slow'); 
 
\t \t if(curr_item.index() != last_item.index()) { 
 
\t \t \t curr_item = $(slides[++i]); 
 
\t \t } else { 
 
\t \t \t curr_item = first_item; 
 
\t \t } 
 
\t },1500); 
 
} 
 

 
slide_play();

p{margin-bottom: 20px;} 
 

 
.jumbotron{ 
 
\t padding-left: 0; 
 
\t padding-right: 0;} 
 

 
.slider ul { 
 
\t list-style: none; 
 
\t position: relative; 
 
\t height: 400px;} 
 

 
.slider ul li{ 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t right: 0; 
 
\t bottom: 0 } 
 

 
img{ 
 
\t display: block; 
 
\t width: 100%; 
 
\t height: 100% }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container-fluid no-padding"> 
 
\t <div class="container "> 
 
\t \t <div class="row"> 
 

 
\t \t \t <div class="col-xs-12 jumbotron"> 
 
\t \t \t \t <div class="slider"> 
 
\t \t \t \t \t <ul> 
 
\t \t \t \t \t \t <li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=350&h=150" alt="" /></li> 
 
\t \t \t \t \t \t <li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=250%C3%97150&w=350&h=150" alt="" /></li> 
 
\t \t \t \t \t \t <li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="" /></li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </div> \t 
 
\t \t \t </div> 
 

 
\t \t </div><!-- /Row --> 
 
\t </div> <!-- /container --> 
 

 
</div>

Das Problem ist, dass setInterval stoppt/nicht die anonyme Funktion nicht aufrufen (die die Schleife wird neu gestartet), nachdem der curr_item-last_item gleich (curr_item = last_item). Wny?

Das Problem ist, dass setInterval Anschläge/nicht die anonyme Funktion aufrufen (die die Schleife neu gestartet wird), nachdem der curr_item-last_item gleich (curr_item = last_item). Wny?

Quelle

2017-03-28 b Tech

Geben Sie den entsprechenden Code hier bei SO, wenn Sie Geige erstellen können, dann sicher, dass Sie Schnipsel – Satpal

getan, pls check –

Was können Sie denken, dass es nicht weiterhin die Funktion aufrufen? Woher weißt du das, da die Folien schon ausgeblendet sind? –

Ihre Folien sind bereits ausgeblendet. Es ruft immer noch die Funktion an, aber Sie können die Bilder nicht sehen. Sie müssen sie wieder sichtbar machen.

Sie müssen auch i auf Null zurücksetzen.

Also, wenn Sie Ihre Funktion so etwas wie dies geändert:

setInterval(function() { 
    $(curr_item).fadeOut('slow'); 
    if(curr_item.index() != last_item.index()) { 
     curr_item = $(slides[++i]); 
    } else { 
     curr_item = first_item; 
     i = 0; 
    } 
    $(curr_item).show(); 
},1500);

sollte es funktionieren.

Quelle

2017-03-28 17:56:00

gearbeitet. Vielen Dank. –

Warum setInterval nicht nach der letzten Iteration anonym aufruft

Antwort

Verwandte Themen