实现效果：效果预览

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. mysql之零碎知识

    一 视图 什么是视图:视图就是一张虚拟表.方便查看. 创建视图:create view 起名 as sql语句 #两张有关系的表 mysql> select * from course; +-- ...

  2. 2018.11.01 loj#2319. 「NOIP2017」列队（线段树）

    传送门 唉突然回忆起去年去noipnoipnoip提高组试水然后省二滚粗的悲惨经历... 往事不堪回首. 所以说考场上真的有debuffdebuffdebuff啊!!!虽然当时我也不会权值线段树 这道 ...

  3. Java基础-时间类

    关于java中六个时间类的使用和区别 java.util.Date java.sql.Date ,java.sql.Time , java.sql.Timestamp java.text.Simple ...

  4. springboot xml声明式事务管理方案

    在开发过程中springboot提供的常见的事务解决方案是使用注解方式实现. 使用注解 在启动类上添加注解 @EnableTransactionManagement 在需要事务控制的方法添加@Tran ...

  5. ES6展开运算符的3个用法

    展开运算符的用法1:传参 // 展开运算符的用法1 : 传参 function test(a,b) { return a + b ; } var arr = [1,2]; console.log(te ...

  6. kubeadm 双节点部署k8s v1.13.3+calico v3.3.4

    一.部署环境 VMware Workstation 10 centos7 二.主机配置(每台主机都要做) 主机名 ip cpu ram master 192.168.137.10 3G node1 1 ...

  7. MFC 消息框

    窗口类能够使用messagebox int ret = MessageBox(_T("内容"), _T("标题"), MB_OKCANCLE|  //MB_OB ...

  8. C#版ObjectId

    近来在准备弄一个开源的HIS,但一周过去了几乎没有进度.就卡在ID如何生成.HIS的数据库压力大,如何多数据库支持,减轻压力一直想去实现.拿不准纯数字ID段还是GUID一类的文本ID.最终在mongo ...

  9. UNIX之父肯和丹尼斯（连载二）

    从那一场“黑客招聘会”说起     2012年7月末在拉斯维加斯召开的全球黑客大会,已经是这系列会议的第二十一次.除了惯常的Bug发表.技术展示之外,最近几年的黑客大会也开始变得越来越像招聘会.IT业 ...

  10. 可以替代alert 的漂亮的Js弹框

    1 基本弹框 2确认框 3又一种确认框 4带返回的弹框 5带返回的探矿 6 6 一切尽在 http://t4t5.github.io/sweetalert/