jquery defines the method of background dynamic switching effect _jquery

This article illustrates the method of jquery's definition of background dynamic switching effect. Share to everyone for your reference. Specifically as follows:

With the following jquery plugin, you can put the picture in an array and tell the jquery image where it needs to rotate the background

(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 to 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 two Backgrounds function setbackgrounds () {image1 = Defaul
  Tsettings.images[0];
  Image2 = defaultsettings.images[1]; Divfg.css ({backgroundimage: "url ('" +image1+ ")", ZIndex:defaultSettings.fgz, backgroundposition:defaultsetting
  S.postion}); Divbg.css ({backgroundimage: "url ('" +image2+ ")", ZIndex:defaultSettings.bgz, backgroundposition:defaultsetting
  S.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 to 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);

I hope this article will help you with your jquery programming.