0

回転する背景画像にJavaScriptを使用しています。問題は、画像が変更されるたびに、ページが一番上にジャンプすることです。うまくいけば、これは簡単な修正です！

これが私のコードです：

<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>
4

1 に答える 1

0

Your page jumps because for an instant #slider is absent and the other page content collapses into its space. Try this: 

#slider_wrapper {
    height: 550px;
}

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

You may also want to preload your background images to prevent odd fadeIn delays.

于 2013-03-20T16:45:08.993 に答える