頁面跳轉到頂部時使用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旋轉背景

回答

相關問題