abstract：实时自适应浏览器窗口大小的全屏背景轮播动画<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;
实时自适应浏览器窗口大小的全屏背景轮播动画
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<style>
* { margin: 0; border: 0; padding: 0; }
ul, li { list-style: none; }
html, body { background-color: #808080; }
html, body, .banner, .banner li { width: 100%; height: 100%; min-width: 800px; min-height: 600px; /; /*这里的最小高宽是为了防止窗口太小图片变形*/ }
.banner { position: relative; overflow: hidden; }
.banner li { position: absolute; top: 0; left: 0; }
.banner li { display: none; }
</style>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/BgLoop.js"></script>
</head>
<body>
<ul class="banner">
<li><a href="#"><img src="img/1.jpg" /></a></li>
<li><a href="#"><img src="img/2.jpg" /></a></li>
<li><a href="#"><img src="img/3.jpg" /></a></li>
<li><a href="#"><img src="img/4.jpg" /></a></li>
</ul>
<script>
var Fpic = $(".banner li");
var Lpic = Fpic.find("img");
//图片自适应浏览器窗口大小
var winW, winH;
function findSize() {
if (window.innerHeight && window.innerWidth) {
winW = window.innerWidth;
winH = window.innerHeight;
}
if (document.documentElement.clientHeight && document.documentElement.clientWidth) {
winW = document.documentElement.clientWidth;
winH = document.documentElement.clientHeight;
}
if (document.body.clientHeight && document.body.clientWidth) {
winW = document.body.clientWidth;
winH = document.body.clientHeight;
}
Lpic.css({ "width": winW, "height": winH });
}
window.onload = findSize;
window.onresize = window_resize;
var resizeTimeoutId;
function window_resize(e) {
window.clearTimeout(resizeTimeoutId);
resizeTimeoutId = window.setTimeout('findSize();', 100);
}
//图片轮播动画
var FpicNum = Fpic.length;
Fpic.eq(0).fadeIn();
var now = 0;
setInterval(function () {
if (now >= FpicNum - 1) {
Fpic.eq(FpicNum - 1).stop().fadeOut(500);
now = -1;
}
Fpic.eq(now).stop().fadeOut(500);
now++;
Fpic.eq(now).stop().fadeIn(500);
}, 3000);
</script>
</body>
</html>