jQuery定义的背景动态切换效果代码

通过下面的jQuery插件，你可以将图片放在一个数组里，然后告诉jQuery图片需要在什么地方背景轮换

/**
* jQuery Fading background roator
*
* Copyright (c) 2012 Ryan Naddy (ryannaddy.com)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*/

(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);