实现效果：效果预览
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%; }
目的：让背景全屏显示并且位于最底层。
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接口。
包含了很多图片，欢迎大叫调用。
当然你也可以使用自己的方法换图片地址。