在jquery中使用淡入淡出效果更改正文背景图像
嘿，我想淡出一个新的背景图像，让我们说每60秒。 我设置了这样的背景图片：
body {background-image: url(background.jpg);} 现在我想改变它，所以在60秒后它变为background2.jpg，然后在60秒后变为background3.jpg等等。
我发现很多东西没有在身体上改变它，但只是作为一个图像…任何快速的解决方案？
谢谢！
重新更新更新：
甚至NEWER小提琴（没有参数.callee）
变化：
- Javascript的改进
- CSS更正（现在适合整页）
- 添加了随机图像序列的选项而不是顺序
- => NEWER Fiddle的替代版本<=（如果OP的img服务器已关闭）
大更新
从前面的答案中获取此代码的内容，并添加了一些bling（使用我的网站背景存储lol）
原始小提琴:)
新超级小提琴
使用Javascript：
$(document).ready(function () { var img_array = [1, 2, 3, 4, 5], newIndex = 0, index = 0, interval = 5000; (function changeBg() { // -------------------------- // For random image rotation: // -------------------------- // newIndex = Math.floor(Math.random() * 10) % img_array.length; // index = (newIndex === index) ? newIndex -1 : newIndex; // ------------------------------ // For sequential image rotation: // ------------------------------ index = (index + 1) % img_array.length; $('body').css('backgroundImage', function () { $('#fullPage').animate({ backgroundColor: 'transparent' }, 1000, function () { setTimeout(function () { $('#fullPage').animate({ backgroundColor: 'rgb(255,255,255)' }, 1000); }, 3000); }); return 'url(http://sofzh.miximages.com/jquery/field.' + img_array[index] + '.jpg)'; }); setTimeout(changeBg, interval); })(); });
CSS：
body { height: 100%; width: 100%; margin: 0; padding: 0; position: relative; background-image: url(http://sofzh.miximages.com/jquery/field.2.jpg); background-size: cover; background-repeat: no-repeat; background-position: 0 0; background-attachment: fixed; } #fullPage { position: absolute; min-width: 100%; min-height: 100%; top: 0; left: 0; background-color: rgb(255, 255, 255); }
您可以使用setInterval方法并在CSS中定义的具有不同背景图像的类之间切换：
setInterval(function() { var $body = $('body'); if($body.hasClass('background1')) { $body.removeClass('background1'); $body.addClass('background2'); } else { $body.removeClass('background2'); $body.addClass('background1'); } }, 1000);
小提琴
此示例使用1000的间隔，即1秒。 您可以在需要的任何时间段更改此值。
UPDATE
注意到你的问题要求淡入淡出，所以我在body上添加了一个CSS3属性：
body { transition: background 0.5s linear; }
小提琴已经更新。
基于Dan-Nolan（以前称为user506980）的答案，您还可以将背景分配给数组，然后使用计数器从数组中调用每个背景
jsFiddle演示
此外，您可以将setInterval函数分配给变量，然后稍后使用该变量来停止重复。
$(document).ready(function() { var cnt=0, bg; var $body = $('body'); var arr = ['bg1.jpg','bg2.jpg','bg3.jpg','bg4.jpg','bg5.jpg','bg6.jpg']; var bgrotater = setInterval(function() { if (cnt==5) cnt=0; bg = 'url("' + arr[cnt] + '")'; cnt++; $body.css('background-image', bg); }, 1000); //To stop the backgrounds from rotating. Note the critical step above //of assigning the setInterval function to a variable, in order to //use it again (below) to stop the repeating function $('#some_button_id').click(function() { clearInterval(bgrotater); }); }); //END document.ready
由于我建立在Dan-Nolan的答案之上，如果你赞成这个答案，请提出他的回答。 而且我看到Deryck已经添加了他的，这也是正确的。 给予好评。
https://github.com/srobbin/jquery-backstretch Backstretch是一个简单的jQuery插件，允许您向任何页面或元素添加动态resize，可幻灯片显示的背景图像。 图像将拉伸以适合页面/元素，并随着窗口/元素大小的变化自动resize。
jQuery(document).ready(function() { var cnt=0, bg; var $body = jQuery('body'); var arr = ['secondbg.jpg','sartulebis-archeva2.png']; animate = function(){ } var bgrotater = setInterval(function() { if (cnt==2) cnt=0; bg = 'url("http://yalcingroup.ge/test/wp-content/uploads/2015/08/' + arr[cnt] + '")'; cnt++; jQuery('#background_cycler').animate({opacity:1}, 2000, function(){ $body.css('background-image', bg); }); jQuery('#background_cycler').animate({opacity:0}, 2000); },10000);
}）;
每12秒在presentacion容器中更改一个图像; 它可以是身体标签
HTML
JS
延迟（11000）+ setTimeout（1000）= 12秒转换持续时间= 300 + 300 = 600毫秒
var imgArray = ['image-1', 'image-2', 'image-3'], index = 0; (function changeBG(){ // mask element only for transition $('.mask').delay(11000).animate({opacity:1}, 300, function(){ index = (index + 1) % img_array.length; // in presentacion element change bg images $('.presentacion').css("background-image", "url('images/bg-"+imgArray[index]+".jpg')"); }).animate({opacity: 0}, 300); setTimeout(changeBG, 1000); })();
CSS
.presentacion { background-attachment: fixed; background-color: rgba(0, 0, 0, 0.5); background-image: url("images/image-1.jpg"); background-position: center center; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; position: relative; width: 100%; z-index: 0; opacity: 1; } .mask { background-color: rgba(0,0,0,0); bottom: 0; left: 0; opacity: 0; position: absolute; right: 0; top: 0; height: 100%; z-index: 10; }
以Deryck的答案为基础……
如果jQuery Color无法正常运行（有时fadeIn() ），您可以使用fadeIn()和fadeOut()代替：
$(document).ready(function () { var img_array = [1, 2, 3, 4, 5], newIndex = 0, index = 0, interval = 5000; (function changeBg() { // -------------------------- // For random image rotation: // -------------------------- // newIndex = Math.floor(Math.random() * 10) % img_array.length; // index = (newIndex === index) ? newIndex -1 : newIndex; // ------------------------------ // For sequential image rotation: // ------------------------------ index = (index + 1) % img_array.length; $('body').css('backgroundImage', function () { $('#fullPage').fadeOut(1000, function () { setTimeout(function () { $('#fullPage').fadeIn(1000); }, 3000); }); return 'url(http://sofzh.miximages.com/jquery/field.' + img_array[index] + '.jpg)'; }); setTimeout(changeBg, interval); })(); });