实现效果：效果预览

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. python学习 day7 (3月8日)

    read()读出来了之后文件里就从之后开始  光标不知道在哪 编码的进阶: 背景: ASCII:英文字母,数字,特殊符号,------------>二进制的对应关系 str: 一个字符 ---- ...

  2. 【转】ssh-copy-id帮你建立信任

    本原创文章属于<Linux大棚>博客. 博客地址为http://roclinux.cn. 文章作者为roc. == 对于做运维的同学来说,给两台UNIX/Linux机器建立ssh信任关系是 ...

  3. 2018.12.30 bzoj3028: 食物（生成函数）

    传送门 生成函数模板题. 我们直接把每种食物的生成函数列出来: 承德汉堡:1+x2+x4+...=11−x21+x^2+x^4+...=\frac 1{1-x^2}1+x2+x4+...=1−x21​ ...

  4. 2018.11.18 spoj Triple Sums（容斥原理+fft）

    传送门 这次fftfftfft乱搞居然没有被卡常? 题目简述:给你nnn个数,每三个数ai,aj,ak(i<j<k)a_i,a_j,a_k(i<j<k)ai​,aj​,ak​( ...

  5. Codeforces Round #523 (Div. 2) E. Politics（最小费+思维建图）

    https://codeforces.com/contest/1061/problem/E 题意 有n个点(<=500),标记第i个点的代价a[i],然后分别在这n个点建两棵树,对于每颗树的每个 ...

  6. 严格别名规则“-fstrict-aliasing”和“-fno-strict-aliasing”及类型双关

    “-fstrict-aliasing”表示启用严格别名规则,“-fno-strict-aliasing”表示禁用严格别名规则,当gcc的编译优化参数为“-O2”.“-O3”和“-Os”时,默认会打开“ ...

  7. 阿里云 oss实时日志查询

    实时日志查询 更新时间:2019-01-29 10:31:49 编辑 · 本页目录 开启实时日志查询 查询实时日志 参考文档 用户在访问 OSS 的过程中,会产生大量的访问日志.实时日志查询功能将 O ...

  8. linux下修改root密码以及找回密码的方法

    以root身份登陆,执行: # passwd 用户名 (修改密码) # useradd 用户名 (添加用户) 具体示例如下:[root@bogon ~]# passwd root Changing p ...

  9. Yeoman安装和使用详解

    Yeoman generator-react-webpack 一 什么是Yeoman Yeoman帮助我们创建项目,提供更好的工具来使我们的项目更多样化. Yeoman提供generator系统,一个 ...

  10. U盘或者移动银盘退出时一直显示占用中问题解决--最粗暴解决方式

    问题描述: ---------------------------弹出 USB 大容量存储设备 时出问题---------------------------Windows 无法停用“通用卷”设备,原 ...