javascript - 带有预加载器的 jQuery 图像淡入淡出

Question

我想要一个简单的图像淡入淡出，类似于 http://malsup.com/jquery/cycle/ ，但带有预加载器。是否有一个好的 jQuery 插件可以同时完成这两项工作？另外，我不是在寻找加载条。

这个问题很接近，但不一样=> jQuery Crossfade Plugin

如果它是一个默认为 CSS3 的解决方案，那就太好了，否则会退回到 JS 以尽可能保持原生处理。

正在寻找......

• 会自动播放
• 没有控件
• 将根据时间设置转到下一张图像，即。 5 秒，除非未加载下一张图片，在这种情况下它会完成图片加载并显示。
• 交叉淡入淡出过渡，不是淡入黑色或白色，而是交叉淡入淡出。从一开始它就会淡出。
• 没有缩略图或图库等，只有图片
• 如果图片可以是CSS背景图片最好，这样用户就不能随便拖出图片了
• 每个面板都需要可点击，以便用户可以点击图片并转到网站的某个部分。

Answer 1

好吧，这是我对它的戳戳。预加载器在 vanilla js 中，幻灯片循环在 jQuery 中。实现起来非常简单，概念更简单。

Demo

一个非常简单的演示，说明了 DOM 操作方法

---

HTML

<!-- not much here... just a container -->
<div id="content"></div>

CSS

/* just the important stuff here.  The demo has example styling. */
#content
{
    position:relative;
}
#content img
{
    position:absolute;
}

javascript/jQuery

// simple array
var images = [
    "http://imaging.nikon.com/lineup/dslr/d90/img/sample/pic_003t.jpg",
    "http://imaging.nikon.com/lineup/dslr/d90/img/sample/pic_005t.jpg",
    "http://imaging.nikon.com/lineup/dslr/d90/img/sample/pic_001t.jpg"
];

// some adjustable variables
var delay = 2000;
var transition = 1000;

// the preloader
for(var i in images)
{
    var img = document.createElement("img");
    img.src = images[i];
    img.onload = function(){
        var parent = document.getElementById("content");
        parent.insertBefore(this,parent.childNodes[0]);
        if(i == images.length - 1)
        {
            i = 0;
            startSlides();
        }
    }
}

// and the actual loop
function startSlides()
{
    $("#content img:last").delay(delay).fadeTo(transition,0,function(){
        $(this).insertBefore($(this).siblings(":first")).fadeTo(0,1);
        startSlides();
    });
}

---

简而言之，这个概念是让容器中的第一个图像淡出，一旦完成改变它在 DOM 中的位置(有效地将它隐藏在相等的树级兄弟之后)，然后再次调用该函数。这样做的原因是因为它只会淡化容器的第一个子节点，但在回调时它会更改不断循环节点的节点。这使得非常有效的非常小的源文件成为可能。

编辑 1:

---

32 分钟后调整...

Demo 2

编辑 2:

---

原来如此简单的脚本现在变得非常复杂 :P 我添加了一些仅适用于现代浏览器但在需要时可用的缩放功能。这个也有一个加载栏，因为它预加载图像(可能是也可能不是理想的:P)

small images demo

large images demo