当使用Javascript旋转背景时，页面跳转到顶部

Page jumps to top when using Javascript rotating background

本文关键字：顶部 Javascript 旋转 背景      更新时间：2023-09-26

我使用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>

您的页面跳转，因为#slider瞬间不存在，其他页面内容塌陷到它的空间。试试这个:

#slider_wrapper {
    height: 550px;
}
<div id="slider_wrapper">
    <div id="slider"></div>
</div>

你可能还想预加载你的背景图像，以防止奇怪的fade延迟。

相关文章：