자바 스크립트 회전 배경을 사용하는 경우 페이지가 위로 이동합니다.

Question

회전하는 배경 이미지에 javascript를 사용하고 있습니다. 문제는 이미지가 바뀔 때마다 페이지가 맨 위로 이동한다는 것입니다. 바라기를 이것은 쉬운 수정이다! 즉시 #slider 결석이고 다른 페이지의 콘텐츠가 우주로 붕괴하기 때문에

<script type='text/javascript'> 
$(window).load(function(){ 


var initialBg = $('#slider').css("background-image"); // added 

var firstTime = true; 
var arr = [initialBg, "url(/wp-content/uploads/2013/03/slider2-explore.png)", "url(/wp- content/uploads/2013/03/slider3-experience.png)"]; 
(function recurse(counter) { 
    var bgImage = arr[counter]; 
    if (firstTime == false) { 
     $("#slider").fadeOut("slow", function(){ 
      $('#slider').css('background-image', bgImage); 
     }); 
     $("#slider").fadeIn("slow"); 
    } else { 
     firstTime = false; 
    }    
    delete arr[counter]; 
    arr.push(bgImage); 
    setTimeout(function() { 
     recurse(counter + 1); 
    }, 4500); 
})(0); 

}); 
</script> 

Answer 1

페이지가 점프 :

여기 내 코드입니다. 이 시도 : 또한 홀수 fadeIn 지연을 방지하기 위해 배경 이미지를 미리로드 할 수 있습니다

#slider_wrapper { 
    height: 550px; 
} 

<div id="slider_wrapper"> 
    <div id="slider"></div> 
</div> 

.