Question

我想要一个旋转木马式循环，其中1个图像来，隐藏，另一个相同，依此类推。问题是我想让它无限循环，这是不会发生的。

  $(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变量但没有效果。请帮忙。提前谢谢。

小提琴：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);
});

谢谢！

Answer 2

我没有得到这部分

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

否则你可以使用如下的递归函数：

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

循环不在旋转木马中发生

2 个答案: