時間背景圖像轉換器

我需要一些建議和想法來改進背景圖像轉動器。時間背景圖像轉換器

想法？

<script type="text/javascript"> 
    var images = ['bg1.png', 'bg2.png', 'bg3.png']; 
    var curImage = 0; 
    function switchImage() 
    { 
     curImage = (curImage + 1) % images.length 
     document.body.style.backgroundImage = 'url(images/' + images[curImage] + ')' 
    } 
    window.setInterval(switchImage, 500); 
</script>

我想要的圖像褪色相互轉化。
我需要能夠預加載圖像，以便在第一次顯示時加載它們時沒有延遲。

來源

2011-09-20 Cory

預加載圖像與圖像對象及其來源進行，如在...

var img1 = new Image(); 
img1.src = "mypicture.jpg";

，將預載他們。

至於淡入淡出，您將需要使用容器div的css的alpha屬性創建動畫。 http://www.w3schools.com/css/css_image_transparency.asp

只是隨着時間增加/減少不透明度。

來源

2011-09-20 01:59:26

我該怎麼做才能請你給我一個很好的代碼，實際上工作????' – Cory

1）預載：

var images = ['bg1.png', 'bg2.png', 'bg3.png']; 

for (var i = 0; i < images.length; i++) { 
    (new Image()).src = window.location.href + '/images/' + images[i]; 
}

更改這部分window.location.href + '/images/'適合你更好。

2）衰落

總之你可以不褪色的背景圖像。

如果你絕對需要褪色，你就必須在img標籤來創建你的背景，並將其定位你的body的內容背後，是這樣的：

http://jsfiddle.net/XH78L/

來源

2011-09-20 02:02:43

我已經看到背景圖像已經在許多web 2.0網站褪色，所以它是可能的 – Cory

<html> 
<head> 
<title></title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript"></script> 
<script> 
var displayBox; 

$(document).ready(function() { 

    StartShow(); 

}); 

function StartShow() { 
    var interval = 5000; 
    var slideShowID; 

    slideShowID = setInterval(Gallery, interval); 

} 

function Gallery() { 
    var nextImage = $("#container li.selected").next().length; 
    if (nextImage > 0){ 
    $("#container li.selected").removeClass("selected").next().addClass("selected"); 
    imgSrc = $("#container li.selected").children().attr("src"); 
    if(imgSrc != null) { 
     $("#banner").fadeOut('slow', function() { $("#banner").css("background-image", imgSrc); }).fadeIn(); 
    } 
    } 
    else { 
    $("#container li.selected").removeClass("selected").siblings(':first').addClass("selected"); 
    imgSrc = $("#container li.selected").children().attr("src"); 
    if (imgSrc != null) { 
     $("#banner").fadeOut('slow', function() { $("#banner").css("background-image", imgSrc); }).fadeIn(); 
    } 
    } 
} 
</script> 
</head> 
<body> 

<ul id="container" style="display: none;"> 
    <li class="thumbnail selected"><img src="1.jpg"/></li> 
    <li class="thumbnail"><img src="2.jpg"/></li> 
    <li class="thumbnail"><img src="3.jpg"/></li> 
    <li class="thumbnail"><img src="4.jpg"/></li> 
    <li class="thumbnail"><img src="5.jpg"/></li> 
    <li class="thumbnail"><img src="6.jpg"/></li> 
    <li class="thumbnail"><img src="7.jpg"/></li> 
    <li class="thumbnail"><img src="8.jpg"/></li> 
    <li class="thumbnail"><img src="9.jpg"/></li> 
</ul> 


<div id="banner"></div> 

</body> 
</html>

只需將開始的背景圖像設置爲想要在陸地上加載的任何圖像，然後顯示將從Document.Ready開始。

來源

2011-09-20 05:23:02 CBRRacer

時間背景圖像轉換器

回答

相關問題