我想要一个简单的图像淡入淡出,类似于 http://malsup.com/jquery/cycle/ ,但带有预加载器。是否有一个好的 jQuery 插件可以同时完成这两项工作?另外,我不是在寻找加载条。
这个问题很接近,但不一样=> jQuery Crossfade Plugin
如果它是一个默认为 CSS3 的解决方案,那就太好了,否则会退回到 JS 以尽可能保持原生处理。
正在寻找......
- 会自动播放
- 没有控件
- 将根据时间设置转到下一张图像,即。 5 秒,除非未加载下一张图片,在这种情况下它会完成图片加载并显示。
- 交叉淡入淡出过渡,不是淡入黑色或白色,而是交叉淡入淡出。从一开始它就会淡出。
- 没有缩略图或图库等,只有图片
- 如果图片可以是CSS背景图片最好,这样用户就不能随便拖出图片了
- 每个面板都需要可点击,以便用户可以点击图片并转到网站的某个部分。
最佳答案
好吧,这是我对它的戳戳。预加载器在 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)
关于javascript - 带有预加载器的 jQuery 图像淡入淡出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7655866/