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

我正在使用JavaScript的旋转背景图像。问题是，每当图像发生变化时，页面都会跳转到顶部。希望这是一个简单的解决方案！页面跳转到顶部时使用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>

来源

2013-03-20 brooke f.

唯一让我怀疑的是'arr.push（bgImage）;'。它可能充当页面内的锚点。 – isherwood 2013-03-20 15:19:32

你能提出一个替代方案吗？ – 2013-03-20 15:37:54

如果没有演示，我无法确定任何事情。我不是一个JS向导。 :-) – isherwood 2013-03-20 16:01:05

你的页面跳转，因为瞬间#slider不存在和其他网页内容坍缩成它的空间。试试这个：

#slider_wrapper { 
    height: 550px; 
} 

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

您可能还想预先加载背景图片以防止奇怪的淡入淡出延迟。

来源

2013-03-20 16:45:08 isherwood

奇妙的是，这个伎俩！我曾尝试定义#slider div的高度，但这并不奏效。你介意告诉我预载图像的最佳方式吗？ – 2013-03-20 17:24:40

你可以将它们放在屏幕外的HTML中，比如{position：absolute; left：-999em;}，或者你可以使用JS预加载器。谷歌或搜索。请接受和/或upvote任何有用的答案。 – isherwood 2013-03-20 17:33:12

非常感谢，这是一个巨大的帮助。我希望你不要介意，如果我再问一个问题 - 任何想法为什么覆盖我的旋转背景的文本框的顶部看起来像是每次改变时从后面跳到背景前面？ – 2013-03-20 18:02:22

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

回答

相关问题