背景圖像旋轉器

我需要一些建議和想法來改善背景圖像旋轉器。背景圖像旋轉器

腳本截至目前是非常基本的，但我期待改變2件事。

我希望圖像相互淡入。
我需要能夠預加載圖像，以便在第一次顯示時加載它們時沒有延遲。

想法？

<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, 5000); 
</script>

實施例：http://www.nickersonweb.com/demo/PMS/index.html

來源

2011-09-01 Cory

對不起......你其他的代碼沒有爲我工作。不知道爲什麼。他做到了。可能是一個小小的改變？不確定。別往心裏放。 – Cory

對於衰落，嘗試淡出（）和淡入（）與jQuery。（演示和文檔在這裏：http://api.jquery.com/fadeOut/，http://api.jquery.com/fadeIn/）

預壓，試圖在頁面上使不可見圖像的地方，像這樣：

<img src='bg1.png' width="0" height="0">

另一種方式來預載的圖片是使用JavaScript來創建一個圖像目的。以下是我用於類似事情的代碼。

var imgnum=0; 
var imgsrcs=new Array("imgs/img1.jpg","imgs/img2.jpg") 
var fimgs=new Array(); 
var imgid="imgid"; 
function timedCount() 
    { 
    $("#"+imgid).fadeTo(1000,0,function(){newimage(); 
}); 
    setTimeout(timedCount,5000); 
    } 
function newimage() 
{ 
imgnum=(imgnum+1)%imgsrcs.length; 
document.getElementById(imgid).src=fimgs[imgnum].src; 
$("#"+imgid).fadeTo(1000,1); 
} 
function initializeslideshow() 
{ 
    var i; 
    for(i=0;i<imgsrcs.length;i++) 
    { 
     fimgs[i]=new Image(270,270) 
     fimgs[i].src=imgsrcs[i]; 
    } 
} 
initializeslideshow(); 
setTimeout(timedCount,5000);

你需要鏈接到jQuery的（和jQuery UI，我認爲）用上面的代碼，這樣，例如：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>

來源

2011-09-01 02:06:42 someone

預加載工作，我認爲，但不知道是否有一種更簡單的方法，不會顯示在源代碼中。將工作，但謝謝。 – Cory

背景圖像旋轉器

回答

相關問題