背景图像旋转器

我需要一些建议和想法来改善背景图像旋转器。背景图像旋转器

脚本截至目前是非常基本的，但我期待改变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

背景图像旋转器

回答

相关问题