jQuery body background-image rotator

현재 웹 사이트 디자인을 위해 일련의 이미지 회전시 신체 배경을 갖고 싶습니다. 여러 가지 방법을 시도했다 즉 fadeIn() 및 fadeOut() 함수를 사용하지만 그들은 본문 내 부서의 불투명도에 영향을 미치는 것. 나는 또한 시도했다 bgStretcher 그러나 이것은 외관 문제점을 일으키고 웹 사이트를 느리고 고르지 않게했다.jQuery body background-image rotator

이미지를 페이드 인하거나 페이드 아웃하는 것이 바람직합니다. 도움말은 평가 될 것입니다

Here's a link to the website 나는 현재 /의 JS/디렉토리 아래 background.js이라고 수정 된 스크립트 파일. 파일은 현재 실험 중일 뿐이므로 현재 주석 처리되어 있습니다. 내가 노력하고 내 현재 코드가 작동 얻을 수 있습니다 두 개의 현재 배경 이미지는 "이미지/BG/bg1.jpg"와 "이미지/BG/bg2.jpg"여기

있습니다

$(document).ready(function() { 
    setInterval(switchImage, 5000); 
    switchImage(); 

}); 

function switchImage() 
{ 
$('body').css("background-image", "url(../images/bg/bg2.jpg)").fadeIn(1000); 
$('body').css("background-image", "url(../images/bg/bg1.jpg)").fadeOut(1000); 
}

백그라운드 이미지 간 전환 방법을 파악한 후에는 일련의 이미지를 변경하기위한 조건을 간단히 추가 할 수 있습니다.

건배,이 jQuery를 플러그인과

출처

2012-06-02 Dane Wilson

도움이 필요한 관련 코드를 * 여기에 귀하의 질문에 게시하십시오 *. 그리고 이상적으로 [라이브 데모] (http://jsfiddle.net/)를 게시하십시오. 그렇지 않으면 문제가 해결되면이 질문은 더 이상 사용되지 않습니다 (문제 코드는 링크 된 페이지에서 수정/제거되므로)). –

매우 간단 데인 윌슨 : "슬라이드 쇼에 Backstretch 사용"데모에서 jQuery Backstretch 그것을위한 코드 조각입니다.

출처

2012-06-02 11:56:04

이것은 위에서 언급 한 bgStretcher와 동일하게 작동하지만 코드는 훨씬 작고 멋지다. 느리고 고르지 않은 원인을 알아 냈습니다. 렌더링 문제를 일으키는 투명한 속성을 가진 오버레이 PNG를 사용하려고했기 때문입니다. 미리 패턴 오버레이로 이미지를 저장하여이 문제를 해결했습니다. –

이 작업은 css3에서만 수행 할 수 있습니다. 나는 곧 바이올린을 올릴거야.

편집 : 키 프레임과 CSS3의 배경 크기로 애니메이션을 만들려고했으나 분명히 함께 작동하기를 원하지 않았습니다 (깜박임). 아마도 jQuery를 살펴 보는 것이 좋습니다.

출처

2012-06-02 12:07:39

jQuery body background-image rotator

답변

관련 문제