문제
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; };
해결책
'루프'의 끝에 도달하고 실행하면 두 가지가 발생합니다.
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
페이드 문에 이러한 변수를 사용하여 변수 및 처음에는 모든 논리를 수행합니다.
제휴하지 않습니다 StackOverflow