登录页背景图图片轮换（轮播）和背景图自适应（不拉伸）的简单实现

这是本人开发过程中，登录页的一个简单例子，主要实现图片轮换和背景图自适应，过程分享如下。

#登录框的居中问题

我们把登录页面分成背景和登录面板两个部分

<div id="background"><img
        src="background1.jpg"/>
</div>
<div class="loginForm">
    <%--此处省略登录框内容代码--%>
</div>

浏览器窗口会改变，登录面板大小不变。

使用绝对定位来布局

        .loginForm {
            top: 50%;
            left: 50%;
            margin-top: -230px;
            margin-right: -200px;
            position: absolute;
        }

        #background {
            position: absolute;
            z-index: -1;
        }

让登录框距离顶部50%，距离左侧50%，“margin-top: -230px;”表示登录面板上移自身高度的一半，以达到居中效果。使用“z-index: -1;”使输入面板覆盖在背景div的层上。
#背景图片的自适应
使背景图不拉伸
为了解决背景图片在分辨率不同的情况下会变形的问题，引入了如下插件:

jqthumb.js

其详细参数好介绍见：jqthumb.js缩略图插件-让缩略图正常显示而不变形

引入该组件后，我们编写一个简单的函数

    /**
     * 背景图片的不拉伸自适应
     */
    function autoSizeBacgroundImage() {
        $('#background img').jqthumb({
            width: window.innerWidth,
            height: window.innerHeight,
            after: function (imgObj) {
                imgObj.css('opacity', 0).animate({opacity: 1}, 2000);
            }
        });
    }

窗口改变时，改变背景图片大小，以适应窗口
我们使用如下函数来使得图片大小能够随着窗口的改变而改变

/*当窗口改变时调用自适应函数*/
    $(function () {
        $(window).resize();
    });
    $(window).resize(function () {
        autoSizeBacgroundImage()
    });

#图片轮换
获取随机图片
为了达到背景图片随机切换的效果，使用了随机函数来生成一个随机整数以获取随机图片。

      // 从任意值开始 至 任意值
      //parseInt(Math.random()*(上限-下限+1)+下限);
      var imageNumber = parseInt(Math.random() * (imageMax - imageMin + 1) + imageMin);

上述代码主要用于生成一个随机数，我们可以对多张背景图进行排序并编号，结合获取到的随机数即可达到获取随机图片地址的效果。

我们将获取到的地址，显示到页面上，并调用图片自适应函数刷新背景图片。

        $('#background img').attr("src", url);
        autoSizeBacgroundImage()

图片轮换，显示随机图片
我们使用了Jquery的定时循环执行器setInterval()来达到定时更换背景图的效果。

 //图片轮换
    setInterval(function () {
        //随机取一张图片
        var imageMax = 4;
        var imageMin = 1;
        // 从任意值开始 至 任意值
        //parseInt(Math.random()*(上限-下限+1)+下限);
        var imageNumber = parseInt(Math.random() * (imageMax - imageMin + 1) + imageMin);
        var oldUrl = $('#background img').attr("src");
        var newUrl = ctx + "/background" + imageNumber + ".jpg";
        //截取旧地址的前半部分，加上随机地址的后半部分，得到一个新地址
        var url = oldUrl.split("background")[0] + "background" + newUrl.split("background")[1];
        $('#background img').attr("src", url);
        autoSizeBacgroundImage()
    }, 5000);

这里我们每5000毫秒，换一次背景图。

（全文完）

欢迎光临：松果前端开发导航

登录页背景图图片轮换（轮播）和背景图自适应（不拉伸）的简单实现

jqthumb.js

猜你喜欢