jQuery_jqueryを使用して動的背景切り替え効果を定義する方法

この記事の例では、jQuery が背景の動的な切り替え効果を定義する方法を説明します。皆さんの参考に共有してください。詳細は以下の通りです。

次の jQuery プラグインを使用すると、画像を配列に配置し、バックグラウンドで画像を回転する必要がある場所を 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);

この記事が皆さんの jQuery プログラミングに役立つことを願っています。