带有垂直carousel.Fading的全屏幻灯片放映全屏图像问题

Question

我做了一个垂直的旋转木马，它由图像组成，当点击的时候应该是全屏可见的。但问题是，我不能弄清楚如何确保全屏图像是预加载的或其他什么，并像缩略图图像一样工作(预加载)。

我不确定使用css背景预加载全屏图像的方法是什么，也不确定当我单击旋转木马中的缩略图时，如何确保图像为fadeIn或只是一些过渡。

请看下面的链接，我的代码是在这里上传的。http://www.lluvia.me/slideshow/carousel.html

如果方便的话，请随时通过检查源代码来检查脚本。如果能帮上忙，我们将不胜感激。谢谢!

Answer 1

找到了这篇文章并认为它可能会对你有所帮助，Preloading images with 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; }