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]);

我使用了图片预加载，因此我的滑块中的第一张图片不需要花时间显示，但它会使用空格代替，并且所有后续图像都会显示而不显示任何空白区域。但我不知道在显示过程中如何淡化图像。

以下代码

$(".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/

中的滑块

1）步骤应该是什么，以便在滑块第一次开始时不显示空格？将代码置于$(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()。您希望在.src标记上设置img属性，以将其指向新图像。假设.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属性与正常的图像路径一起使用，因为图像位于浏览器缓存中，所以它会立即加载。

使用javascript加载fadein图像

1 个答案: