javascript - 使用 JavaScript 预加载的淡入淡出图像

Question

图像预加载代码片段:

myimages=new Array()
function preloadimages(){
   for (i=0;i<preloadimages.arguments.length;i++){
      myimages[i]=new Image()
      myimages[i].src=preloadimages.arguments[i]
    }
}

preloadimages("img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg")

显示预加载图像的 jquery 代码:

$(".vrpl_slider_img").fadeIn(40000).html(myimages[i]);

我使用了图像预加载，这样 slider 中的第一个图像不需要时间来显示，但它会显示一个空白，并且所有后续图像都会显示，而不显示任何空白。但我不知道如何在显示过程中淡入图像。

下面的代码

$(".vrpl_slider_img").fadeIn(40000).html(myimages[i]).fadeIn('slow');

在控制台中显示错误:

$(".vrpl_slider_img").fadeIn(40000).html(myimages[i]).fadeIn is not a function

我想要一个 http://www.cisco.com/ 中的 slider

1) 应该采取什么步骤才能使 slider 第一次开始时不显示空白？将代码放入 $(document).ready(.. 或不放入任何内容。

2)如何实现fadeIn效果？

3) 在 http://www.cisco.com/ ，对于每个图像，图像上的文本似乎在图像的其余部分之后突出显示一点。如何实现这一目标？

编辑:

在图像预加载片段之后，下一段如下:

for (i=0; i<n; i++){

$(".vrpl_slider_img").fadeIn(40000).html(myimages[i]);



if(i==n-1){

i=0;
}
    }

这就是我有兴趣在这里讨论的幻灯片部分。

Answer 1

您不想在 img 标记上调用 .html()。您希望在 img 标记上设置 .src 属性以将其指向新图像。假设 .vrpl_slider_img 最初不可见，您可以使用:

preloadimages("img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg")

// then some time later after the preload images have loaded
$(".vrpl_slider_img").attr("src", "img/1.jpg").fadeIn(40000);

加载预加载图像后，您根本不需要使用它们。预加载图像的目的是使图像加载到浏览器缓存中，以便它们在本地可用(而不是通过互联网)，因此在将来请求时将立即加载。因此，您只需将 .src 属性与正常图像路径一起使用，并且由于图像位于浏览器缓存中，因此它将立即加载。