首页 / 脚本样式 / JavaScript / 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）;