Question

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

截至目前的剧本非常基本，但我希望改变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

Answer 1

对于淡入淡出，请使用jQuery尝试fadeOut（）和fadeIn（）。（此处的演示和文档：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>

背景图像旋转器

1 个答案: