Advanced Search

rotating background images

/ Published in: jQuery
Save to your folder(s)
Creates rotating background images with a smooth transition.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.