本文实例讲述了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 = 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程序设计有所帮助。