Posted By

ryonley on 01/13/12


Tagged

image jquery images background rotating rotator


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

Balamir
spee66
BrockSamsom


rotating background images


 / Published in: jQuery
 

Creates rotating background images with a smooth transition.

  1. //-----HTML------------------------------------------------->
  2.  
  3. <div id="headouter"><div id="headinner"></div></div>
  4.  
  5.  
  6.  
  7. //-------JQUERY---------------------------------------------->
  8. $(document).ready(function(){
  9. var imgArr = new Array( // relative paths of images
  10. 'images/headmain5.jpg',
  11. 'images/headmain3.jpg',
  12. 'images/headmain4.jpg',
  13. 'images/headmain2.jpg'
  14. );
  15.  
  16. var preloadArr = new Array();
  17. var i;
  18. /* preload images */
  19. for(i=0; i < imgArr.length; i++){
  20. preloadArr[i] = new Image();
  21. preloadArr[i].src = imgArr[i];
  22. }
  23.  
  24. var inner = $('#headinner');
  25. var outer = $('#headouter');
  26.  
  27. inner.css('background', '#fff url("images/headmain5.jpg") no-repeat');
  28. outer.css('background', '#fff url("images/headmain3.jpg") no-repeat');
  29.  
  30. var currImg = 2;
  31. var intID = setInterval(changeImg, 5000);
  32.  
  33. function changeImg() {
  34. if(inner.is(':visible')) {
  35. var count = currImg++%preloadArr.length;
  36. var imgSrc = preloadArr[count].src;
  37. inner.fadeOut('slow', function(){
  38. inner.css('background', '#fff url('+imgSrc+') no-repeat');
  39. });
  40. } else {
  41. var count = currImg++%preloadArr.length;
  42. var imgSrc = preloadArr[count].src;
  43. inner.fadeIn('slow', function(){
  44. outer.css('background', '#fff url('+imgSrc+') no-repeat');
  45. });
  46. }
  47. }
  48.  
  49.  
  50. });

Report this snippet  

You need to login to post a comment.