JS实现网页背景旋转缩放轮播效果

实现效果：效果预览

css代码：

.switch_images {
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    list-style: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -999;
}
.switch_images li {
    display: inline-block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: 6s all;
}
.switch_images img {
    min-height: 100%;
    width: 100%;
}

目的：让背景全屏显示并且位于最底层。

html代码:

<body>
        <ul class="switch_images" id="pic_content">
            <!-- 图片轮播 -->
            <li><img src="http://d.5857.com/zj_160823/003.jpg"></img></li>
            <li><img src="http://d.5857.com/zj_160823/003.jpg"></img></li>
            <li><img src="http://d.5857.com/zj_160823/003.jpg"></img></li>
        </ul>
</body>

这里我们先插入了三张壁纸，避免刚开始通过函数加载出来的壁纸延迟。

js代码：

    setInterval(function () {
            $.get('http://api.youngam.cn/picapi.php', function (data) { //通过ajax获取到新的图片地址
                $('#pic_content').prepend(
                    '<li><img src="' + data + '" alt=""></li>');//插入新的li
            });

        //删除最后一个li
        $('#pic_content li:last-child').remove();
        $('#pic_content li:last-child').css({
            transform: 'scale(1.1) rotate(' + parseInt((Math.random() - 0.5) * 20) + 'deg)',
            opacity: '0'
        });//删除最后一个li时给他一个过度。旋转+-10度，透明度变为0
    }, 8000);//8秒切换一张

总代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>背景轮播</title>
        <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
        <style type="text/css">
.switch_images {
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    list-style: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -999;
}
.switch_images li {
    display: inline-block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: 6s all;
}
.switch_images img {
    min-height: 100%;
    width: 100%;
}
        </style>
    </head>
    <body>
        <ul class="switch_images" id="pic_content">
            <!-- 图片轮播 -->
            <li><img src="http://d.5857.com/zj_160823/003.jpg"></img></li>
            <li><img src="http://d.5857.com/zj_160823/003.jpg"></img></li>
            <li><img src="http://d.5857.com/zj_160823/003.jpg"></img></li>
        </ul>
    </body>
    <script>
    setInterval(function () {
            $.get('http://api.youngam.cn/picapi.php', function (data) {
                $('#pic_content').prepend(
                    '<li><img src="' + data + '" alt=""></li>');
            });

        //删除最后一个li
        $('#pic_content li:last-child').remove();
        $('#pic_content li:last-child').css({
            transform: 'scale(1.1) rotate(' + parseInt((Math.random() - 0.5) * 20) + 'deg)',
            opacity: '0'
        });
    }, 8000);
    </script>
</html>

这里调用了我的图片api接口。

包含了很多图片，欢迎大叫调用。

当然你也可以使用自己的方法换图片地址。

posted @ 2019-02-24 14:15  本该如此  阅读(2187)  评论(1)  编辑  收藏  举报