slider - 带有垂直轮播的全屏幻灯片。全屏图像问题淡入

Question

我制作了一个垂直轮播，其中包含单击时应该全屏可见的图像。但问题是我无法弄清楚如何确保全屏图像被预加载或像缩略图图像一样工作（预加载）。

我不确定使用css背景预加载全屏图像要遵循什么方法，以及当我单击轮播中的缩略图时如何确保图像淡入或只是一些过渡。

请查看上传我的代码的以下链接。 http://www.lluvia.me/slideshow/carousel.html

如果方便，请随时通过检查源来检查脚本。帮助将不胜感激。谢谢！

Answer 1

找到这篇文章并认为它可能会对您有所帮助，使用 jQuery 预加载图像

尝试在您的正文中发布一些代码以供将来参考。:)

快捷方便：

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}

// Usage:

preload([
    'img/imageName.jpg',
    'img/anotherOne.jpg',
    'img/blahblahblah.jpg'
]);

或者，如果你想要一个 jQuery 插件：

$.fn.preload = function() {
this.each(function(){
    $('<img/>')[0].src = this;
});
}

// Usage:

$(['img1.jpg','img2.jpg','img3.jpg']).preload();

或者，如果您想完全使用 CSS，请查看此页面： http: //perishablepress.com/3-ways-preload-images-css-javascript-ajax/您可以将背景图像放置在屏幕外然后来需要时出现在屏幕上。

#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }
#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }
#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }