javascript - 淡出图像并替换为另外 5 个等等？

Question

我是 jquery/Javascript 的新手。

问题:假设我有 35 张图片，我的屏幕尺寸是 1200px。第一次前 5 张图像淡入，在同一位置几秒后，接下来的 5 张图像将淡入，前一张图像将淡入，然后接下来的五张图像将淡入，直到显示所有图像，然后递归执行。

我得到一个图像淡入与另一个淡出交换的例子，但不是多个图像一个。

……

等等

 var totalLengthphotobanner =  $('.imageClick').width()+$newPos*count;
 var $photobannerWidth = $('.photobanner').width();
 var allImage = $('img');
 var count = $( ".photobanner" ).find( allImage ).length;
 var $noOfImg;
 var $width = $('.imageClick').width();
 var $gap = 150;
 var $track =0;
 $noOfImg = Math.floor(($gap+$photobannerWidth)/($width+$gap));
 //alert($noOfImg);
 $images =1;
 $keepCount =1;
 while($keepCount<count)
    {
        var $newPos = 0;
        var $addPos = 250;
            if($track>=$noOfImg){
                for($images=1;$images<=$noOfImg;$images++){
                    $('#sponsor-'+$keepCount).css('position','absolute');
                    $('#sponsor-'+$keepCount).css('left',$newPos+'px');
                    $('#sponsor-   '+$keepCount).fadeIn(1500).delay(3500).fadeOut(1500);
                    $newPos = $newPos+$addPos;
                    $keepCount = $keepCount+1;
                }
            }else{
                for($images=1;$images<=$track;$images++){
                    $('#sponsor-'+$keepCount).css('position','absolute');
                    $('#sponsor-'+$keepCount).css('left',$newPos+'px');
                    $('#sponsor-'+$keepCount).fadeIn(1500).delay(3500).fadeOut(1500);
                    $newPos = $newPos+$addPos;
                    $keepCount = $keepCount+1;
                }
          }
      $track = count - $images;
    }

Answer 1

我正在尝试完成一个简单的模型，我不确定它是否是您想要的。我使用递归函数来完成一些循环工作。

$("#move").click(function() {
  fadeFunc();
});

function fadeFunc() {
  $(".current").fadeOut("normal", function() {
    $(this).removeClass("current");
    if ($(this).next()) {
      $(this).next().addClass("current");
      $(this).next().fadeIn().delay(2000).fadeOut("normal", fadeFunc);
    }
  });
}

#container {
  width: 400px;
  height: 200px;
  border: 1px solid black;
  overflow: hidden;
}
.img_group {
  width: 380px;
  height: 180px;
  margin: 10px;
  display: inline-block;
  background-color: #aaa;
}
.img {
  background-color: #ccc;
  width: 100px;
  height: 160px;
  margin: 10px;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="container">
  <div class="img_group current">
    <div class="img">Group 1</div>
    <div class="img">Group 1</div>
    <div class="img">Group 1</div>
  </div>
  <div class="img_group">
    <div class="img">Group 2</div>
    <div class="img">Group 2</div>
    <div class="img">Group 2</div>
  </div>
  <div class="img_group">
    <div class="img">Group 3</div>
    <div class="img">Group 3</div>
    <div class="img">Group 3</div>
  </div>
</div>
<button id="move">Move</button>

我将多张图片打包成一张 <div class="img_group"> .