jQuery 페이딩 갤러리

Question

Hay All, 나는 jQuery와 함께 간단한 페이딩 갤러리를 썼습니다. 기본적으로 이미지 세트를 통해 반복되어 서로로 페이딩됩니다. 예측대로, 마지막 이미지에 도달 할 때까지 완벽하게 작동하면 마지막에서 첫 번째 이미지로 사라지지 않고 표시합니다.

여기 내 jQuery가 있습니다

$(document).ready(function(){

Zindex = 99999;
i = 0;

$(".flash img").each(function(){
    $(this).css({
        'position':'absolute',
        'z-index':Zindex,
        'display':'none'
    });
    Zindex--;
});

$(".flash img:first").show();

doFade = function(){        
    if( i == 6 ) { i = 0; };        
    $(".flash img:eq("+parseInt(i+1)+")").fadeIn(100);
    $(".flash img:eq("+parseInt(i)+")").fadeOut(1000);      
    setTimeout("doFade()", 2000);
    i++;
};

doFade();

});

참고 : 7 개의 이미지 만 있습니다.

그리고 내 마크 업

<div class='flash'>
    <img src="img/gallery/picture1.jpg" width="780" height="253" alt="Picture1">
    <img src="img/gallery/picture2.jpg" width="780" height="253" alt="Picture2">
    <img src="img/gallery/picture3.jpg" width="780" height="253" alt="Picture3">
    <img src="img/gallery/picture4.jpg" width="780" height="253" alt="Picture4">
    <img src="img/gallery/picture5.jpg" width="780" height="253" alt="Picture5">
    <img src="img/gallery/picture6.jpg" width="780" height="253" alt="Picture6">
    <img src="img/gallery/picture7.jpg" width="780" height="253" alt="Picture7">
</div> 

나는 문제가 줄에 있다고 생각한다

if( i == 6 ) { i = 0; };

Answer 1

'루프'의 끝에 도달하고 실행하면 두 가지가 발생합니다.

if( i == 6 ) { i = 0; };

먼저, 당신은 사라지고 있습니다 i + 1, 이것은 첫 번째 이미지가 아니라 두 번째 이미지입니다. i 이제 0입니다.

둘째, 당신은 사라지고 있습니다 i, 첫 번째 이미지는 보이지 않습니다. 표시되는 마지막 이미지는 이미지 7, i + 1 6이었다.

따라서 마지막 이미지를 숨기지 않고 첫 번째 이미지를 보여주지 않습니다. 나를위한 정말 빠른 해결책은 페이드 아웃 진술을 첫 번째로 실행하는 것이었고 (나는 아직도 현재 이미지를 가리키고 있습니다) i = -1 대신에 0 '루프'가 끝나면

doFade = function(){
    $(".flash img:eq("+parseInt(i)+")").fadeOut(1000); 
    if( i == 6 ) { i = -1; }
    $(".flash img:eq("+parseInt(i+1)+")").fadeIn(100);             
    setTimeout("doFade()", 2000);
    i++;
};

그러나 이것은 루프를 시작할 때 전환의 흐름을 방해하는 것처럼 보입니다 (페이드 진술이 이제 논리로 분리되어 있기 때문에 추측). 그에 대한 간단한 수정은 소개만큼 쉬워야합니다. current 그리고 next 페이드 문에 이러한 변수를 사용하여 변수 및 처음에는 모든 논리를 수행합니다.