이미지를 페이드 아웃하고 다른 이미지로 교체하는 등의 작업이 필요합니까?

Question

jquery/Javascript가 생생합니다.

Ques : 35 개의 이미지가 있고 화면 크기가 1200px라고 가정합니다. 첫 번째로 처음 5 장의 이미지가 사라지고 동일한 위치에 몇 초가 지나면 다음 5 장의 이미지가 IN과 이전 이미지의 페이드 아웃 및 다음 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

무엇 자네가 원하는. 재귀 함수를 사용하여 루프 작업을 수행했습니다.

나는 하나의 <div class="img_group">에 mutilple 이미지를 포장 한

$("#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>

.