動態更改CSS背景圖像

我已經嘗試了幾件事情，但迄今沒有運氣。動態更改CSS背景圖像

我在尋找的是一種讓我的HTML標頭標籤每隔幾秒更換背景圖片的方法。任何解決方案都是受歡迎的，只要它不復雜。

我現在有這樣的代碼，以及鏈接到JQuery的：

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

$(function() { 
    var header = $(‘.mainHeader’); 
    var backgrounds = new Array(
     ‘url(img/rainbow.jpg)’, 
     ‘url(img/chickens_on_grass.jpg)’ 
     ‘url(img/cattle_on_pasture.jpg)’ 
     ‘url(img/csa_bundle.jpg)’ 
    ); 
    var current = 0; 

    function nextBackground() { 
     header.css(‘background’,backgrounds[current = ++current % backgrounds.length]); 
     setTimeout(nextBackground, 10000); 
    } 

    setTimeout(nextBackground, 10000); 
    header.css(‘background’, backgrounds[0]); 
});

我的HTML頭：

<header class="mainHeader"></header>

和CSS：

.mainHeader { 
    background: no-repeat center bottom scroll; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    min-height: 150px; 
    padding-top: 2%; 
    font-size: 100%; 
}

現在我現在有背景圖像了。

期待建議。

來源

2014-02-13 CW Design

你的陣列是錯誤的...有幾個逗號丟失.. – gvee

引號字符串是錯誤的了。 http://jsfiddle.net/4LFnK/ – amsross

<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script> 
$(document).ready(function(){ 
var header = $('body'); 

var backgrounds = new Array(
    'url(http://placekitten.com/100)' 
    , 'url(http://placekitten.com/200)' 
    , 'url(http://placekitten.com/300)' 
    , 'url(http://placekitten.com/400)' 
); 

var current = 0; 

function nextBackground() { 
    current++; 
    current = current % backgrounds.length; 
    header.css('background-image', backgrounds[current]); 
} 
setInterval(nextBackground, 1000); 

header.css('background-image', backgrounds[0]); 
}); 
</script> 
</head> 
<body> 
<header></header> 
</body> 
</html>

來源

2014-02-14 04:54:14 sopanha

+10

感謝您複製粘貼我的代碼';-)' – gvee

謝謝你們，我現在得到了它的工作，感謝您的全力幫助。還有一件事。我可以得到這個：'var header = $（'header'）;'調用'class'而不是元素。我想申請我的HTML5'

'？ –

想出了'class'事情，一切似乎都很好，再次感謝您的幫助，非常感謝。 –

您不能使用‘字符分隔JavaScript字符串。您必須使用"或'。

來源

2014-02-13 16:44:40 Quentin

雖然Microsoft Word是最好的代碼編輯器！：P – daekano

@daekano我希望你在開玩笑。 – rvighne

@rvighne當然我是：P 根據我的經驗，您很少會在Word以外的任何地方看到這些引用。 – daekano

做了一些修改代碼

DEMO：http://jsfiddle.net/p77KW/

var header = $('body'); 

var backgrounds = new Array(
    'url(http://placekitten.com/100)' 
    , 'url(http://placekitten.com/200)' 
    , 'url(http://placekitten.com/300)' 
    , 'url(http://placekitten.com/400)' 
); 

var current = 0; 

function nextBackground() { 
    current++; 
    current = current % backgrounds.length; 
    header.css('background-image', backgrounds[current]); 
} 
setInterval(nextBackground, 1000); 

header.css('background-image', backgrounds[0]);

（如在其他評論中所指出）最大的變化是，你必須使用撇號**'** S，不是那些時髦的打開和關閉單引號，並且你的數組不正確。

通過這些修正閃開我簡單的幾件事情：

增量current然後取模量（我知道這基本上是你做了什麼，而是如何更容易的是，調試;)）
目標background-image直接
使用setInterval()而不是雙呼叫setTimeout

來源

2014-02-13 16:54:12 gvee

到目前爲止，感謝您的幫助，但沒有任何工作。我將我的'script'標籤內的代碼複製並粘貼到我的頁面中。像你所說的那樣，還有'背景圖像'。儘管如此，我依然沒有形象，沒有任何意義。 –

@CWDesign你可以試試它與PlaceKitten鏈接？ – gvee

是的，我就像你一樣。 –

你只能通過1.將圖像由「DIV包裝」並將其設置爲位置包圍的「IMG」在你的HTML標籤內達致這與HTML/CSS同樣的技術：相對和DIV包裝IMG對位置：絕對的。對於全寬/全高，您可以使用百分比或潛在的「背景大小：封面」（未選中），然後調用CSS動畫以動態更改圖像。

或者2.您可以將多個圖像添加到CSS中的背景中，用逗號分隔，應用background-size：cover並再次使用CSS動畫更改背景。

下面是一個example也Mozilla的CSS3 Animation Documentation

來源

2014-07-15 17:15:52 truleighsyd

它必須是晚，但可以幫助一個又一個。對於某些情況下的這個目標，我更喜歡使用一個名爲tcycle的jquery插件，它只有幾行代碼，並且只支持淡入淡出轉換，但即使在大圖片的情況下，它也可以順利運行。

設置具有TCYCLE幻燈片是容易的，甚至可以用聲明性標記如

<div class="tcycle"> 
<img src="p1.jpg"> 
<img src="p2.jpg"> 
</div>

訣竅可以使用CSS z索引被東德來完成：-1 div容器和設置的寬度和高度下載並檢查其他例子，100％

首頁是Malsup jQuery plugins

來源

2014-11-01 15:59:30

這是一個可怕的想法。它會首先加載所有圖像。 –

動態更改CSS背景圖像

回答

相關問題