实现效果：效果预览

css代码：

.switch_images {

    display: inline-block;

    margin:;

    padding:;

    width: 100%;

    height: 100%;

    list-style: none;

    position: fixed;

    top:;

    left:;

    z-index: -999;

}

.switch_images li {

    display: inline-block;

    height: 100%;

    width: 100%;

    position: absolute;

    top:;

    left:;

    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接口。

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

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

JS实现网页背景旋转缩放轮播效果的更多相关文章

  1. JQ 实现轮播图（3D旋转图片轮播效果）

    轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...

  2. JS、JQ实现焦点图轮播效果

    JS实现焦点图轮播效果 效果图: 代码如下,复制即可使用: (不过里面的图片路径需要自己改成自己的图片路径,否则是没有图片显示的哦) <!DOCTYPE html> <html> ...

  3. js实现淘宝首页图片轮播效果

    原文:http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585 <!DOCTYPE html> &l ...

  4. 使用js制作一般网站首页图片轮播效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. CSS3图片轮播效果

    原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且 ...

  6. html中使用JS实现图片轮播效果

    1.首先是效果图,要在网页中实现下图的轮播效果,有四张图片,每张图片有自己的标题,然后还有右下角的小方框,鼠标悬浮在小方框上,会切换到对应的图片中去. 2.先是HTML中的内容,最外层是轮播图整个的容 ...

  7. CSS动画之旋转魔方轮播

    很久没有回头来复习CSS方面的知识了, 正好又到了月底写文章的deadline......所以这次选择了详细巩固一下CSS3动画有关的知识点,因为之前只是用过一些属性并没有深究细节. 在我自己写完这篇 ...

  8. JS案例之2——cycle元素轮播

    元素轮播效果是页面中经常会使用的一种效果.这个例子实现了通过元素的隐藏和显示来表现轮播效果.效果比较简单. 效果图如下: 源代码如下: <!DOCTYPE html> <html&g ...

  9. JS图片自动和可控的轮播切换特效

    点击这里查看效果:http://hovertree.com/texiao/js/1.htm HTML文件代码如下: <!DOCTYPE html> <html xmlns=" ...

随机推荐

  1. MZOJ 1134: 二叉苹果树

    按书上大的,dfs还需加强 #include <bits/stdc++.h> #define read read() using namespace std; int read { ; c ...

  2. Cisco interview

    A.  1. Self-introduction I am Yanlin He . I am a master degree candidate of school of infomation sci ...

  3. my.ini优化mysql数据库性能的十个参数(推荐)

    (1).max_connections:允许的同时客户的数量.增加该值增加 mysqld 要求的文件描述符的数量.这个数字应该增加,否则,你将经常看到 too many connections 错误. ...

  4. 2019.01.17 bzoj2753: [SCOI2012]滑雪与时间胶囊（最小生成树）

    传送门 最小生成树菜题. 题意:给出一些有向边,问有向的最小生成树. 思路:先dfsdfsdfs一把所有有用的边都存起来,然后按终点点权为第一关键字,边权为第二关键字给边排序保证最小生成树的合法性,排 ...

  5. 在table中tr的display:block在firefox下显示布局错乱问题

    [转自:] http://blog.csdn.net/sd2131512/article/details/4720345 按照常理,对于某一单元行需要显示时,使用:display:block属性,不需 ...

  6. 虚拟机 与 主机 Ping 中的设置

    这段时间是学习华清远见的Linux A8 关于Linux移植,遇到虚拟机与主机Ping不通.经查阅后总结出以下 VM中设置. “虚拟机设置-->硬件--> 网络适配器--> 桥接模式 ...

  7. Docker Compose demo 使用

    1.docker compose 安装 curl -L "https://github.com/docker/compose/releases/download/1.22.0/docker- ...

  8. MFC连接MySQL C API方法

    1.首先下载一个32位的MySQL,因为vc的版本是32位了,不用32 位的MySQL会出现无效的机械码错误. MySQL安装地址:https://dev.mysql.com/downloads/my ...

  9. BZOJ 3259 [Sdoi2014]数表 (莫比乌斯反演 + 树状数组)

    3529: [Sdoi2014]数表 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 2321  Solved: 1187[Submit][Status ...

  10. python psutil简单示例

    python psutil简单示例 利用psutil编写简单的检测小脚本 0.安装psutil模块                                                    ...