jQuery图像交叉淡入淡出与预加载器

Question

我想要一个简单的图像交叉淡入淡出,类似于http://malsup.com/jquery/cycle/,但是有一个预加载器.是否有一个好的jQuery插件可以同时执行这两个操作？另外,我不是在寻找一个负载条.

这个问题很接近,但不一样=> jQuery Crossfade插件

如果它是一个默认为CSS3的解决方案,那将是很好的,但否则将回退到JS以尽可能保持处理原生.

寻找那些......

• 将自动播放
• 没有控制
• 将根据时间设置转到下一个图像,即.5秒,除非没有加载下一个图像,在这种情况下它完成加载图像然后显示它.
• 交叉淡入淡出过渡,不会褪色为黑色或白色,而是交叉淡入淡出.从一开始它就会消失.
• 没有缩略图或画廊等,只是图像
• 如果图像可能是CSS背景图像,那将是最好的,因此用户无法简单地拖出图像
• 每个面板都需要可点击,以便用户可以单击图像并转到网站的一部分.

Answer 1

好吧,这是我的捅.预加载器在vanilla js中,幻灯片循环在jQuery中.实现起来非常简单,概念更简单.

演示

一个非常简单的演示,演示了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分钟后调整......

演示2

编辑2:

我这么简单的脚本现在非常复杂:PI添加了一些缩放功能,只能在现代浏览器上运行,但如果需要的话可以使用.这个还有一个加载条,因为它预加载图像(可能是也可能不是:P)

小图片演示

大图像演示

Answer 2

我认为你仍然可以使用jQuery 循环插件来做到这一点；除了图像预加载之外，即使是 jQuery Cycle lite 版本也可以默认开箱即用地执行您想要的所有操作。

如果您查看此处，您会发现添加一些 Javascript 非常简单，该 Javascript 将在加载时添加图像（在前两个之后）。您需要稍微修改代码（例如stack.push(this)，您需要类似的东西stack.push("<div style="background-image:url("+img.src+")"></div>")，而不是），但我认为这是完全可行的。

编辑：这里有一个关于如何将div 变成可点击链接的问题的链接。

编辑 2：我喜欢Joseph 的想法，即将元素移动到隐藏的 DIV，所以我更新了我的代码。现在它还保留每个 div 指向的链接：http ://jsfiddle.net/g4Hmh/9/

编辑3：最后更新！http://jsfiddle.net/g4Hmh/12/