淡出图像并替换为另外5张图像，依此类推？

Question

我是jquery / JavaScript的新手。

问题：假设我有35张图像，并且屏幕尺寸为1200px。 第一次是前5张图像渐入，然后在同一位置几秒钟后，接下来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"> 。