我已经搜索了一段时间,查看了这里的不同帖子,但除了我即将向您展示的来自 jAndy 的帖子之外,没有任何真正有用的帖子。
我基本上希望能够在 div 的背景中放一个幻灯片。
到目前为止,我有以下代码,但是,如您所见....它淡入、显示图片、淡出为白色、切换图片,然后淡入以显示新图片.... .我只是希望淡入淡出混合在一起,而不是一个淡出另一个淡入。我知道这是相当开放的,但有人能指出我正确的方向吗?
var images = [
'/slideshow1.jpg',
'/slideshow2.jpg',
'/slideshow3.jpg'
];
loop = 0;
$home = $('#slideme');
(function fader(){
$home.fadeOut(1300, function(){
$home.css('background', 'url(' + images[loop] + ') top center no-repeat');
$home.fadeIn(1300, function(){
setTimeout(fader, 9000);
});
});
if(loop < images.length -1)
loop++;
else loop = 0;
})();
我真诚地感谢任何帮助!
最佳答案
jsBin demo
您不能同时 X-fade 2 个背景图像,因为一个元素只支持一个背景图像。至少不重叠背景图像。 (如果我错了请纠正我)
相反您可以读取您的网址、创建真实图像并将它们附加到所需元素:
var images = [
'/slideshow1.jpg',
'/slideshow2.jpg',
'/slideshow3.jpg'
];
var imagesN = images.length;
var $slideme = $('#slideme');
for(i=0;i<imagesN;i++){
$('<img>',{ src : images[i] }).appendTo( $slideme );
}
//现在您的图像已附加,请不要忘记对它们进行 CSS 处理:position:absolute;
以实现一对一。
然后您可以使用我的 jQuery 插件淡出循环您的图像。 该插件允许您悬停时暂停,也可以点击图片前进!
/* FadeMe 'FPS'
// jQuery plugin
// Author: Roko C. Buljan (2012)
// www.roxon.in */
(function($){
$.fn.fademe = function(F,P,S){
F=F||700; // Fade time (default)
P=P||3000; // Pause time (default)
S=S-1||0; // Start from 1st image (default)
var e=this.children(),T;
function a(){ e.eq(S=++S%e.length).fadeTo(F,1).siblings(e).stop(1).fadeTo(F,0); }
e.on('mouseenter mouseleave click',function(e){
var m=e.type==='mouseenter'?clearTimeout(T):(e.type==='click'?a():aa());
}).eq(S).show().siblings(e).hide();
function aa(){T=setTimeout(function(){a();aa();},F+P);}aa();
};
})(jQuery);
$slideme.fademe(); // initiate plugin on your element
通过记住“FPS”,例如:“每秒帧数” :) 您可以轻松修改/覆盖插件默认值:
$slideme.fademe(1300, 9000, 1);
这将导致 1300 毫秒的淡入淡出; 9000 暂停;从“第一张”图像开始(默认)。 要跳过一些默认设置以访问您可以执行的属性:
$slideme.fademe(0, 0, 2);
将被翻译成:default Fade (700);默认暂停(3000);但从第二张图片开始。
编辑如果您想使用背景图片,请执行以下操作:
jsBin demo 2
关于jquery 背景 div 幻灯片?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12539462/