如何显示隐藏两个图像循环 4 次使用 jquery

Question

我的HTML:

<div class="luck">
  <div class="image1"></div>
  <div class="image2"></div>
  <div class="image3"></div>
</div>

我的Javascript:

var 
    delay = 0,
    $ele = $(".luck > div");

$ele.hide();

for(var i = 0; i < 2 ; i++){
    $ele.eq(i).show();
}

我的CSS:

.luck {
  position: relative;
  width: 500px;
  height: 300px;
}

.luck > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 500px;
  height: 300px;
  display: none;
}

.image1 {
  background: red;
}

.image2 {
  background: green;
}

.image3 {
  background: blue;
}

现在我有 3 个 div：图像 1、图像 2、图像 3。

我要运行 :

第一张 : image1 显示，下一张 image2 显示

再次显示 1：显示图像 1，显示下一个图像 2

再次显示 2：显示图像 1，显示下一个图像 2

再次显示 3：显示图像 1，显示下一个图像 2

循环4次，然后显示image3，进度结束。

请帮助我使用jQuery

这是我的 jsfiddle：https://jsfiddle.net/u76r9wc2/

Answer 1

你能试试下面的吗...这就是你需要的？

<div class="luck">
    <div class="image1"></div>
    <div class="image2"></div>
    <div class="image3"></div>
</div>
<style>
  .luck {
    position: relative;
    width: 500px;
    height: 300px;
  }

  .luck > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 500px;
    height: 300px;
    display: none;
  }

  .image1 {
    background: red;
  }

  .image2 {
    background: green;
  }

  .image3 {
    background: blue;
  }

</style> 

<script>
  var 
    itr = 0,
    delay = 500,
    $ele = $(".luck > div");

  $ele.hide();

  /*
  for(var i = 0; i < 2 ; i++){
    $ele.eq(i).show();
  }
  */
  show_repeat(0);
  function show_repeat(i){
    $($ele).eq(i).show(delay, function(){
       itr++;
       if(itr == 8){
          $($ele).eq(2).show(delay);
       } else if(itr % 2 == 0){
          $($ele).eq(1).hide();
          show_repeat(0);
       } else {
          $($ele).eq(0).hide();
          show_repeat(1);
       }
    });
  }     
</script>

https://jsfiddle.net/u76r9wc2/1/

Answer 2

你可以用递归来完成。

var $ele = $(".luck > div");
var iter=8;
$ele.hide();
showImg(0);
function showImg(i){
 iter--;
  if(iter<0)
  {
   $ele.eq(2).show();
    return;
  }
 if(i<=1)
  {
  $ele.eq(i).show();  
    setTimeout(function(){ showImg(i+1); }, 1000);  
  }
  else
  {
   $ele.hide();
   showImg(0);
  }
 
}

.luck {
  position: relative;
  width: 500px;
  height: 300px;
}

.luck > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 500px;
  height: 300px;
  display: none;
}

.image1 {
  background: red;
}

.image2 {
  background: green;
}

.image3 {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="luck">
  <div class="image1"></div>
  <div class="image2"></div>
  <div class="image3"></div>
</div>

如何显示隐藏两个图像循环 4 次使用 jquery

How to show hide two image loop 4 times use jquery

jquery

loops

show

hide