Looping passiert nicht in Karussell

Question

Ich möchte ein Karussell-Looping, wo 1 Bild kommt, verbirgt sich und ein anderes macht das gleiche und so weiter. Das Problem ist, dass ich möchte, dass dies unendlich wiederholt wird, was nicht passiert.

$(function(){ 



//alert(j) 
    var j=-1; 

setInterval(function(){ 

    console.log('hi'); 
if(j>=$(".carousel .item").length){ 
console.log("hut"); 
j = -1; 
} 
while(j<$(".carousel .item").length){ 


    j++; 
console.log("i: "+j); 
    $(".carousel .item").eq(j-1).hide(); 
     $(".carousel .item").eq(j).show(function(){ 
      alert("hiii"); 
     },200,"linear"); 

    //console.log(j); 


} 
j=-1; 
//console.log(j) 

},1200); 



    }) 

html:

<div class="carousel"> 
    <div class="item">India</div> 
    <div class="item">china</div> 
    <div class="item">Australia</div> 

    </div> 

CSS:

.carousel .item{display: none;} 

i resetted die j Variable nach der while-Schleife aber keine Wirkung. Bitte helfen Sie. Danke im Voraus.

Geige: https://jsfiddle.net/fj2r0req/

Answer 1

Hier arbeitet Skript

var j; 
var noOfCar; 
window.addEventListener("load", function() { 
    j = 0; 
    noOfCar = $(".carousel .item").length - 1; 
    $(".carousel .item").eq(0).show(); 
    setInterval(function() { 
     if (j < noOfCar) { 
      $(".carousel .item").eq(j).hide(); 
      j += 1; 
      $(".carousel .item").eq(j).show(); 
     } else { 
      console.log("Inside else"); 
      $(".carousel .item").eq(j).hide(); 
      $(".carousel .item").eq(0).show(); 
      j = 0; 
     } 
    }, 3000); 
}); 

Dank!

Answer 2

ich die Rolle nicht bekommen hat

$(".carousel .item").eq(j).show(function(){ 
     alert("hiii"); 
    },200,"linear"); 

Andernfalls Sie eine rekursive Funktion wie unten verwenden:

var nbItems = $(".carousel .item").length; 
var startingItem = 0; 

function cycle(index, nbItems) { 

    setTimeout(function() { 
     $(".carousel .item").eq(index-1).hide(); 
     $(".carousel .item").eq(index).show(); 

     index++; 

     if (index >= nbItems) { 
      index = 0; 
     } 

     cycle(index, nbItems); 
    }, 1000); 
} 

cycle(startingItem, nbItems);