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

时间：2019-02-24 14:56:31 阅读：206 评论：0 收藏：0 [点我收藏+]

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 + ‘" ></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 + ‘" ></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接口。

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

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

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

原文：https://www.cnblogs.com/tcxq/p/10426067.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)