分享一个自己写的基于JQuery的一个Web背景切换的Demo

这个效果主要有两个特点:

1. 背景切换的渐变

2. 背景大小自适应

3. 背景自适应保持比例同时, 相对居中

js源码:

(function ($) {
    $.fn.bgChange = function (options) {
        var defaults = {
            width: 1920,
            height: 1080,
            changeRate: 3000,
            isLoadLimit: false,
            loadLimit: 10000,
            changed: function () { },
            top: 0,
            loaded: function () { }
        };
        var opts = $.extend(defaults, options);

        var event = {
            loaded: opts.loaded,
            picsLoaded: picsLoaded,
            changed: opts.changed
        };

        var picHolder = $(this);
        var pics = $(picHolder).find('.bgpic img');

        $(pics).attr('status', 'ready');

        var vl = {
            index: 0,
            wWidth: 0,
            wHeigth: 0,
            rate: opts.width / opts.height,
            total: pics.length,
            predex: -1,
            loadCount: 0,
            timer: null,
            lock: false,
            isLoaded: false
        };

        var obj = {
            start: start,
            pause: pause,
            next: next,
            pre: pre,
            total: vl.total
        };

        function start() {
            if (vl.isLoaded) {
                if (vl.timer == null) {
                    vl.timer = setInterval(changePic, opts.changeRate);
                }
            }
        }

        function pause() {
            if (vl.isLoaded) {
                if (vl.timer != null) {
                    clearInterval(vl.timer);
                    vl.timer = null;
                }
            }
        }

        function next() {
            if (vl.isLoaded) {
                pause();
                if (!vl.lock) {
                    var indexT = vl.index;
                    if (vl.predex >= 0 && vl.predex < vl.total) {
                        $(pics).eq(vl.predex).css('z-index', 1).stop(false, false).fadeOut(500, function () {
                            $(this).css('z-index', 0);
                            vl.lock = false;
                        });
                        $(pics).eq(indexT).stop(false, false).show();
                    }
                    event.changed({ index: indexT, total: vl.total });
                    vl.predex = vl.index;
                    vl.index = vl.index < (vl.total - 1) ? vl.index + 1 : 0;

                    start();
                }
                vl.lock = true;
            }
        }

        function pre() {
            if (vl.isLoaded) {
                pause();
                if (!vl.lock) {
                    var indexT = (vl.index - 2) >= 0 ? (vl.index - 2) : (vl.total + vl.index - 2);
                    if (vl.predex >= 0 && vl.predex < vl.total) {
                        $(pics).eq(vl.predex).css('z-index', 1).stop(false, false).fadeOut(500, function () {
                            $(this).css('z-index', 0);
                            vl.lock = false;
                        });
                        $(pics).eq(indexT).stop(false, false).show();
                    }
                    event.changed({ index: indexT, total: vl.total });
                    vl.predex = indexT;
                    vl.index = indexT < (vl.total - 1) ? indexT + 1 : 0;

                    start();
                }
                vl.lock = true;
            }
        }

        function setSize() {
            vl.wWidth = $(window).width();
            vl.wHeight = $(window).height() - opts.top;
            var nWidth = 0;
            var nHeight = 0;
            if (vl.rate > vl.wWidth / vl.wHeight) {
                nWidth = vl.wHeight * vl.rate;
                nHeight = vl.wHeight;
                setPicSize(pics, 'auto', vl.wHeight);
            } else {
                nWidth = vl.wWidth;
                nHeight = vl.wWidth / vl.rate;
                setPicSize(pics, vl.wWidth, 'auto');
            }
            //$(picHolder).css({ 'height': vl.wHeight, 'left': -(nWidth - vl.wWidth) / 2 });
            $(picHolder).css({ 'width': vl.wWidth, 'height': vl.wHeight }).find('.bgpic').css({ 'left': -(nWidth - vl.wWidth) / 2, 'top': -(nHeight - vl.wHeight) / 2 });
        }

        function setPicSize(o, w, h) {
            $(o).css({ 'width': w, 'height': h });
        }

        $(window).resize(function () {
            setSize();
        });

        setSize();

        function changePic() {
            var indexT = vl.index;
            if (vl.predex >= 0 && vl.predex < vl.total) {
                $(pics).eq(vl.predex).css('z-index', 1).stop(false, false).fadeOut(500, function () {
                    $(this).css('z-index', 0);
                }); $(pics).eq(indexT).stop(false, false).show();
            } else {
                $(pics).eq(indexT).stop(false, false).fadeIn(500);
            }
            event.changed({ index: indexT, total: vl.total });
            vl.predex = vl.index;
            vl.index = vl.index < (vl.total - 1) ? vl.index + 1 : 0;
        }

        $(pics).eq(0).show();

        $(pics).each(function (i, val) {
            $(val).load(function () {
                $(val).attr('status', 'loaded');
                vl.loadCount++;
                if (vl.loadCount == vl.total) {
                    vl.isLoaded = true;
                    event.picsLoaded();
                }
            });
            $(val).attr('src', $(val).attr('original'));
        });

        if (vl.isLoadLimit) {
            setTimeout(function () {
                if (!vl.isLoaded) {
                    $(pics).filter("[status='ready']").remove();
                    pics = $(picHolder).find('.bgpic img');
                    vl.total = pics.length;
                    obj.total = vl.total;
                    event.picsLoaded();
                }
            }, opts.loadLimit);
        }

        function picsLoaded() {
            start();
            changePic();
            event.loaded();
        }

        return obj;
    }
})(jQuery);

 

css源码:

body
{
    padding: 0;
    margin: 0;
}
#bgpics
{
    position: absolute;
    width: 100%;
    z-index: 0;
    left: 0;
    top: 0;
    overflow: hidden;
}
.bgpic
{
    position: relative;
}
#bgpics .bgpic img
{
    position: absolute;
    display: none;
    z-index: 0;
}

 

使用:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
    <link href="bgChange.css" rel="stylesheet" type="text/css" />
    <script src="bgChange.js" type="text/javascript"></script>
    <script>
        $(function () {
            $('#bgpics').bgChange({changeRate: 1000,loaded: function () { alert('loaded!') }});
        });
    </script>
</head>
<body>
    <div id="bgpics">
        <div class="bgpic">
            <img original="slide/001.jpg" />
            <img original="slide/002.jpg" />
            <img original="slide/003.jpg" />
            <img original="slide/004.jpg" />
            <img original="slide/005.jpg" />
            <img original="slide/006.jpg" />
        </div>
    </div>
</body>
</html>

 

使用很简单, 同时bgChange()可以传入一些参数, 达到效果的调整, 例如切换速度.

暂时不进行解析和注释, 可能找个时间再补上, 前段时间写的, 逻辑有点遗忘

效果请大家自行下载, 打开htm文件即可.

 

下载地址: http://yunpan.cn/Q757aP3PS2cqa （提取码：fed4）