在橫幅中更改背景

HTML

<section id="banner"> 
    <img src="http://3.bp.blogspot.com/-XKyf-av-Cq4/T8iF9hnSOII/AAAAAAAATUg/zeO5BrKvSes/s1600/tiaras+princesas,novias+(3).png" alt="" style="max-width:200px;height:auto" /> 
    <br> 
    <h2>Etiam adipiscing</h2> 
    <p>Magna feugiat lorem dolor egestas</p> 
    <ul class="actions"> 
     <li><a href="#" class="button big special">Learn More</a></li> 
    </ul> 
</section>

CSS

#banner { 
    padding: 8em 0 6em 0; 
    background-color: #662800; 
    color: rgba(255, 255, 255, 0.75); 
    background-attachment: fixed; 
    background-image: url("../images/banner.jpg"); 
    background-size: cover; 
    text-align: center; 
} 

#banner input, #banner select, #banner textarea { 
    color: #fff; 
} 

#banner a { 
    color: #FF6600; 
}

這是使滑塊以更改無任何動作每2-3秒的背景（圖像）的最簡單的方法？我做了我的研究，試圖包括一些修改，但它不起作用。我不確定如何以正確的方式修改現有的CSS，以及最終我的HTML應該如何查看。

任何想法如何使這項工作？有沒有更簡單的方法？

來源

2015-09-19 Petra

檢查一下，得到基本的想法。一個簡單的基於CSS的[滑塊]（http://codepen.io/dudleystorey/pen/ehKpi）。 – CodeRomeos

如果你正在尋找只是有背景的變化，沒有任何形式的互動，here's an adaptation of the other fiddle you were trying to get working.

包括要循環以上通過陣列中的所有圖像，用逗號分隔，用引號分數。

下面我們爲橫幅元素設置一個變量，以及以毫秒爲單位的間隔時間。

var bannerBackground = document.getElementById('banner'); 
var interval = 2500; //in milliseconds

下面是真正的魔法發生。我們彈出最後一張圖像，並將background-image屬性設置爲數組中的第一個圖像，並且每2500毫秒重複一次。您可以通過更改var interval =聲明中的編號來調整該定時器。

setInterval(function(){ 
    images.unshift(images.pop()); 
    bannerBackground.style.backgroundImage = "url(" + "'" + images[0] + "'" + ")"; 
}, interval);

不需要修改您的HTML本身，但您確實需要包含此JavaScript。它要麼全部粘貼到.js文件，包括它的方式在你的文檔的底部，或者將其粘貼到文檔本身，就像這樣：

<script type="text/javascript"> 
// self executing function 
(function() { 
    // paste all your JavaScript code here. 

})(); 

</script>

底部粘貼此，對您的交易</body>標籤上方。

來源

2015-09-19 20:26:30

非常感謝，這個作品！ – Petra

我還有一個問題，如何將圖像大小限制爲屏幕尺寸的95％？我試圖限制橫幅，但在較小的屏幕尺寸上無法正常工作。 – Petra

在橫幅中更改背景

回答

相關問題