SOURCE

console 命令行工具 X clear

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

$(document).ready(function(){
		$('.bgSlide').bgSlide({
      model:"custom",
      bgs: [
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567093088&di=941b46a01c4fdbdbd67f29e3ed27821c&imgtype=jpg&er=1&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201708%2F05%2F20170805134053_HzALE.thumb.700_0.png',
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567093142&di=259f7abd1415cfdb7f0e155f5f91c42b&imgtype=jpg&er=1&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201802%2F09%2F20180209120153_human.jpg',
        'https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1566488373&di=101fc2d3466472e25c1920b1aa13ffb8&src=http://b-ssl.duitang.com/uploads/item/201609/16/20160916194449_Fw5xQ.jpeg'
      ]
    });
});
<div class="bgSlide"></div>
.bgSlide{
  width: 400px;
  height: 400px;
  border: 1px solid red;
}