实现效果：效果预览

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 console 设立快捷键 学习源码 用到英语

    arbitrary---随意 iterable----迭代 invalid syntax   -----无效的语法 subscriptable   ----可索引访问的

  2. 01.Java 开发简单的计算器

    难度为一般,适合具有 Java 基础和 Swing 组件编程知识的用户学习一. 实验介绍1.1 实验内容本次实验利用Java开发一个可以进行简单的四则运算的图形化计算器,会使用到 Java Swing ...

  3. Softmax && Cross-entropy Error

    softmax 函数,被称为 归一化指数函数,是sigmoid函数的推广. 它将向量等比压缩到[0, 1]之间,所有元素和为1. 图解: Example: softmax([1, 2, 3, 4, 1 ...

  4. Java基础-时间类

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

  5. vueJs的简单入门以及基础语法

    1-1基本数据绑定 <div id="app"> {{ msg }} </div> //script new Vue({ el:"#app&quo ...

  6. boost-断言

    标准assert宏的原型声明在<assert.h>中,其作用是如果它的测试条件为假,则调用abort()终止程序执行,程序退出的时候会弹出一个错误提示框,并向控制台输出所在文件及行号.as ...

  7. Linux top命令总结

    一:在bash里输入top后出现的数据当中目前自己容易理解的有 1.task:中的 num total表示总共有num个进程:num running是正在运行的进程数:num sleeping是正在休 ...

  8. i2c总线，核心，驱动详解

    Linux I2C驱动分析(一)----I2C架构和总线驱动 一.I2C总线原理 I2C是一种常用的串行总线,由串行数据线SDA 和串线时钟线SCL组成.I2C是一种多主机控制总线,它和USB总线不同 ...

  9. Oracle 数据库 dbConsole 配置笔记

    Oracle安装后,DBConsole有时安装会失败,这时可以通过以下命令恢复: set oracle_sid=orclemca -repos recreateemca -config dbcontr ...

  10. 【2】C#读取文本文件

    一.读取