jQuery定义背景动态切换效果的方法

(function($){

 var defaultSettings;

 var divfg, divbg;

 var fadeInterval;

 var fqTimer;

 var currImg = 0;

 var displImg = 0;

 var running = false;

 // Setup settings and initialize the plugin

 $.fn.bgFade = function(settings, callback){

  defaultSettings = $.extend({

   frequency: 5000,

   speed: 10,

   images: [],

   position: "center center",

   fgz: 1,

   bgz: 0

  }, settings);

  var c = 0;

  $(this).each(function(){

   if(c == 0) divfg = $(this);

   if(c == 1) divbg = $(this);

   c++;

  });

  setBackgrounds();

  if(typeof callback == "function"){

   callback();

  }

  return this;

 };

 // Start the fadder

 $.fn.start = function(){

  fqTimer = setTimeout(function(){

  nextFade()},defaultSettings.frequency

  );

  running = true;

  return this;

 };

 // Stop the fadder

 $.fn.stop = function(){

  clearInterval(fadeInterval);

  clearTimeout(fqTimer);

  running = false;

  return this;

 }

 // Get the current image info {array id, image url}

 $.current = function(){

  return {pos: displImg, url: defaultSettings.images[displImg]}

 }

 // Set the first two backgrounds

 function setBackgrounds(){

  image1 = defaultSettings.images[0];

  image2 = defaultSettings.images[1];

  divfg.css({

   backgroundImage: "url(+image1+)",

   zIndex: defaultSettings.fgz,

   backgroundPosition: defaultSettings.postion

  });

  divbg.css({

   backgroundImage: "url(+image2+)",

   zIndex: defaultSettings.bgz,

   backgroundPosition: defaultSettings.postion

  });

  currImg = 1;

  displImg = 0;

 }

 // Set the next background after a fade completes

 function setNextBackground(){

  next = arrayNext();

  image = defaultSettings.images[next];

  divbg.css({

   backgroundImage: "url(+image+)"

  });

  setTimeout(function(){nextFade()}, defaultSettings.frequency);

 }

 // Run a fade

 function nextFade(){

  fadeInterval = setInterval(function(){fadeIt()}, 30);

 }

 // Decrement the opacity of the div

 function fadeIt(){

  if(divfg.css("opacity") == '){

   op = 1;

  }else{

   op = divfg.css("opacity");

  }

  op -= ((1000 * defaultSettings.speed) / 30) * 0.0001;

  divfg.css("opacity", op);

  if(op <= 0){

   bg = divbg;

   bgimg = divbg.css("background-image");

   divfg.css("opacity", "1");

   divfg.css("background-image", bgimg);

   clearInterval(fadeInterval);

   setNextBackground();

   displImg = arrayCurrent();

  }

 }

 // Get the next item in the array

 function arrayNext(){

  var next = currImg + 1;

  if(next >= defaultSettings.images.length){

   next = 0;

  }

  currImg = next;

  return next;

 }

 // Get the current item in the array

 function arrayCurrent(){

  var cur = currImg - 1;

  if(cur < 0)

   cur = defaultSettings.images.length - 1;

  return cur;

 }

})(jQuery);