javascript - 轮播中没有发生循环

Question

我想要一个轮播式循环，其中一张图像出现，隐藏，另一张图像执行相同的操作，依此类推。问题是我希望它无限循环，但这没有发生。

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

我在 while 循环后重置了 j 变量，但没有效果。请帮忙。提前致谢。

fiddle :https://jsfiddle.net/fj2r0req/

Answer 1

这是工作脚本

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

谢谢!