Need ala slider background images of the page (body). I did not find anything ready, I wrote a simple blank:

<!DOCTYPE html> <html> <head> <title>Background Slider</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script> </head> <body> <script type="text/javascript"> function sliderBackgroundBody() { window.currBg = window.currBg + 1; if (!window.currBg || window.currBg > 4) window.currBg = 1; $('body').css('background-image', 'url(bg' + window.currBg + '.jpg)'); setTimeout(sliderBackgroundBody, 3000); } $(document).ready(function() { sliderBackgroundBody(); }); </script> </body> </html>

How to make the background change smoother?

ps: if you know the ready-made solution poke your nose into the link pliz))

  • jsfiddle.net/xdUBZ/1 - Urmuz Tagizade
  • Thanks for the CSS3-based solution, but the bacground-image change smoothness did not add the same) On the background-color, yes, smoother, but on the bacground-image, a sharp change from one picture to another. - Enshtein
  • Add api.jquery.com/fadein - Urmuz Tagizade for example.

1 answer 1

Hazard body on the hrdu does not change. Did you like that.

 <!DOCTYPE html> <html> <head> <title>Background Slider</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script> <style> html, body, div { width: 100%; height: 100%; background-size: cover; } </style> <script type="text/javascript"> function sliderBackgroundBody() { window.currBg = window.currBg + 1; if (!window.currBg || window.currBg > 4) window.currBg = 1; $('#body').fadeOut(500, function() { $(this).css('background-image', 'url(http://lorempixel.com/image_output/animals-qc-640-480-' + window.currBg + '.jpg)').fadeIn(500); }); setTimeout(sliderBackgroundBody, 3000); } $(document).ready(function() { sliderBackgroundBody(); }); </script> </head> <body> <div id="body"></div> </body> </html>