새 배경이 사라지고 10 초 후에 사라집니다.

Question

10 초마다 웹 사이트를 변경하려고했습니다. 성공했습니다. 이제는 페이드 인하 고 페이드 아웃 시켜서 부드럽게 나타납니다. 나는 다른 유배지를 검색하고 관련 질문을 찾았지만 대답을 잘 이해할 수 없었습니다.

자바 스크립트 :

function run(interval, frames) { 
var int = 1; 

function func() { 
    document.body.id = "b"+int; 
    int++; 
    if(int === frames) { int = 1; } 
} 

var swap = window.setInterval(func, interval); 
} 

run(10000, 6); //milliseconds, frames 

CSS :

#b1 { background-image: url("standaard01.jpg"); } 
#b2 { background-image: url("standaard02.jpg"); } 
#b3 { background-image: url("standaard03.jpg"); } 
#b4 { background-image: url("standaard04.jpg"); } 
#b5 { background-image: url("standaard05.jpg"); } 
#b6 { background-image: url("standaard06.jpg"); } 
#b7 { background-image: url("standaard07.jpg"); } 
#b8 { background-image: url("standaard08.jpg"); } 
#b9 { background-image: url("standaard09.jpg"); } 
#b10 { background-image: url("standaard10.jpg"); } 

Answer 1

불행히도 그것은 하나의 요소의 배경으로 설정 두 이미지 사이를 전환 할 수 없습니다. (수정 : 그 요소의 배경 이미지 속성에 애니메이션을 적용함으로써, - 주어진 브라우저 지원) 그러나

을, 다른 요소가 뒤에 낳는 동안에서 하나 개의 요소를 페이드 수 있습니다.

jQuery를 당신이이 경우에 사용할 수 .fadeToggle()라는 메소드가 있습니다.

CSS 속성을 사용하여 img 요소 또는 div 이미지의 "스택"을 서로 위에 놓인 bg 이미지로 설정하십시오.

그런 다음, 자바 스크립트 루프, 매 10 초마다, .fadetoggle() 현재 표시 DIV, 다음 이미지를 공개. 인덱스 변수를 사용하여 상태를 추적 할 수 있습니다.

최종 요소에 도달하면 상단 이미지가 다시 흐려집니다. 그런 다음 두 번째 요소가 사라지기 전에 나머지 요소가 .show()이므로 다시 나타납니다. CSS의 속성 Z- 인덱스 요소 중 하나 앞에, 또는 다른 요소 뒤에 위치합니다 :

Z- 인덱스에 관한 참고

. 따라서 각 항목의 올바른 z- 색인을 CSS 클래스에 설정하거나 프로그래밍 방식으로 페이지를로드하는 것이 좋습니다.

이미지 크기 참고 : 이미지 나 div의 다른 차원 인 경우 다른 페이드 아웃하는 동안, 당신은 하나를 사라질 것이다. 여기에서 우리는 다른 크로스 페이드 방법에 대해 얘기 할 수 있지만이 토론의 범위를 넘어

행운을 빕니다 :)