[jQuery] 网页背景切换的插件

思路：

　　1. 通过jq改变元素的css,来实现背景的切换

功能：

　　1. 背景切换

相关知识点

　　1. $.fn是指jQuery的命名空间，加上fn的方法及属性，会对jQuery实例有效。

　　2. extend(dest,src1,src2,src3...);

　　　　2.1 它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest.如果说后面的参数如果和前面的参数存在相同的名称，那么后面的会覆盖前面的参数值。

　　　　2.2 上述的extend方法原型中的dest参数是可以省略的，如果省略了，则该方法就只能有一个src参数，而且是将该src合并到调用extend方法的对象中去

　　即:

　　　　jQuery.fn.extend(object); 给jQuery对象添加方法。

　　　　jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。

代码

　　

(function($) {

    $.fn.bgSlide = function(options){

        // 默认参数
        var defaults = {
            bgs: [],//储存背景
            model: 'default', //可选项 custom
            max: 13,//切换的个数
            bg: 0,//当前的位置
            times: 5000,//切换时间
            speed: 'fast', // 可换为 mormal  , slow
            opacity: 0.4,//透明度
            abs: this, //默认参数请勿修改，除非你已知他的用处
            arr: [],//请勿修改，缓存区
            url: ''
        };

        // 获得参数
        var ops = $.extend(defaults, options);

        if (ops.model == 'custom') {
            ops.max = ops.bgs.length
        }

        // 插件的方法
        var method = {

            // 获得随机切换的背景的索引
            rand: function () {
                ops.bg = parseInt(Math.random() * ops.max);
                return ops.bg;
            },

            // 切换时间
            time: function () {
                setInterval(function () {
                    method.isChangeBg();
                }, ops.times)
            },


            // 判断当前图片是否已经切换过
            contains: function (arr, obj) {
                var i = arr.length;
                while (i--) {
                    if (arr[i] === obj) {
                        return true;
                    }
                }
                return false;
            },

            //  切换背景中
            isChangeBg: function () {
                //获得新的索引
                method.rand();

                if (ops.model == 'default') {

                    //判断是否完成一个周期
                    if (ops.arr.length == ops.max) {
                        ops.arr = [];
                    }

                    // 判断图片是否切换过
                    if (method.contains(ops.arr, ops.bg)) {
                        method.isChangeBg()
                    } else {
                        // 将未切换的索引添加到缓存区
                        ops.arr.push(ops.bg);
                        // 改变背景
                        method.changeBg();
                    }
                } else if (ops.model == 'custom') {

                    //判断是否完成一个周期
                    if (ops.arr.length == ops.max) {
                        ops.arr = [];
                    }

                    // 判断图片是否切换过
                    if (method.contains(ops.arr, ops.bg)) {
                        method.isChangeBg()
                    } else {
                        // 将未切换的索引添加到缓存区
                        ops.arr.push(ops.bg);
                        // 改变背景
                        method.changeBg();
                    }
                }
                //console.log(this)
            },

            // 改变背景
            changeBg: function () {
                switch (ops.model) {
                    // 读取默认图片路径
                    case 'default':
                        ops.url = 'url("./staic/images/index/bg' + ops.bg + '.jpg")';
                        break;
                    
                    // 读取自定义图片路径
                    case 'custom':
                        ops.url = 'url("' + ops.bgs[ops.bg] + '")';
                        break;
                }

                // 修改css
                $(ops.abs).fadeTo(ops.speed, ops.opacity, function () {
                    $(ops.abs).css({
                        'background-image': ops.url,
                        'background-size': '100%',
                        'background-position': 'fixed',
                        'background-repeat': 'no-repeat',
                        '-webkit-transition': 'background-image 0.5s',
                        '-moz-transition': 'background-image 0.5s',
                        '-ms-transition': 'background-image 0.5s',
                        '-o-transition': 'background-image 0.5s',
                        'transition': 'background-image 0.5s'
                    }).delay(ops.speed).fadeTo(ops.speed, 1);
                });
            }
        };


        method.isChangeBg();
        method.time();


    }


})(jQuery);

　　

　　

Demo