实现效果：效果预览

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. iOS后台唤醒实战：微信收款到账语音提醒技术总结

    1.前言 微信为了解决小商户老板们在频繁交易中不方便核对.确认到账的功能痛点,产品MM提出了新版本需要支持收款到账语音提醒功能.本文借此总结了iOS平台上的APP后台唤醒和语音合成.播放等一系列技术开 ...

  2. Source Routing

    Source routing Followed by book_Principles and Practices of Interconnection Networks, p204. With sou ...

  3. CString int转换

    1.CString 转 int      CString strtemp = "100";    int  intResult;    intResult= atoi(strtem ...

  4. Java编程从头开始---老妪能解

    思想导向: 今天想要分享的是最基础的东西就是如何写一个简单的代码,很多人都是小白,需要的其实并不是很高端的理论,框架和思维模式啊,设计方法啊,这些对于一个新人来说实在是好高骛远,说的那么高端,结果要学 ...

  5. 通过pip安装套件

    pip3 install requests pip3 install BeautifulSoup4   还需要使用jupyter: pip3 install jupyter 打开jupyterbook ...

  6. Build Laravel Blog PigJian by PHP7 and Nginx on Ubuntu

    Recently, I found an interesting framework Laravel written by PHP. i have never used PHP to write an ...

  7. C++指针二（易错模型）

    规则一:Main(主调函数)分配的内存(在堆区,栈区.全局区)都可以在被调用函数里使用.如果在被调用函数里面的临时区(栈)分配内存,主调用函数是不能使用的. #include "stdio. ...

  8. web-day5

    第5章WEB05- BootStrap篇 今日任务 使用JQuery完成表单校验 使用BootStrap制作一个响应式页面 使用BootStrap制作网站首页 教学导航 教学目标 掌握什么是响应式及响 ...

  9. hide handkerchief

    Problem Description The Children’s Day has passed for some days .Has you remembered something happen ...

  10. android testview + listview 整体滚动刷新

    listview滚动刷新不再讲述怎么实现 因为想实现整体滚动的效果,初始计划scrollView嵌套listview实现. 问题一:scrollview嵌套listview时,listview只能显示 ...