实时自适应浏览器窗口大小的全屏背景轮播动画
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <meta charset="utf-8" /> 7 <style> 8 * { margin: 0; border: 0; padding: 0; } 9 ul, li { list-style: none; } 10 html, body { background-color: #808080; } 11 html, body, .banner, .banner li { width: 100%; height: 100%; min-width: 800px; min-height: 600px; /; /*这里的最小高宽是为了防止窗口太小图片变形*/ } 12 .banner { position: relative; overflow: hidden; } 13 .banner li { position: absolute; top: 0; left: 0; } 14 .banner li { display: none; } 15 </style> 16 <script src="js/jquery-1.10.2.js"></script> 17 <script src="js/BgLoop.js"></script> 18 </head> 19 <body> 20 <ul class="banner"> 21 <li><a href="#"><img src="img/1.jpg" /></a></li> 22 <li><a href="#"><img src="img/2.jpg" /></a></li> 23 <li><a href="#"><img src="img/3.jpg" /></a></li> 24 <li><a href="#"><img src="img/4.jpg" /></a></li> 25 </ul> 26 27 <script> 28 var Fpic = $(".banner li"); 29 var Lpic = Fpic.find("img"); 30 31 //图片自适应浏览器窗口大小 32 var winW, winH; 33 function findSize() { 34 if (window.innerHeight && window.innerWidth) { 35 winW = window.innerWidth; 36 winH = window.innerHeight; 37 } 38 if (document.documentElement.clientHeight && document.documentElement.clientWidth) { 39 winW = document.documentElement.clientWidth; 40 winH = document.documentElement.clientHeight; 41 } 42 if (document.body.clientHeight && document.body.clientWidth) { 43 winW = document.body.clientWidth; 44 winH = document.body.clientHeight; 45 } 46 Lpic.css({ "width": winW, "height": winH }); 47 } 48 window.onload = findSize; 49 window.onresize = window_resize; 50 var resizeTimeoutId; 51 function window_resize(e) { 52 window.clearTimeout(resizeTimeoutId); 53 resizeTimeoutId = window.setTimeout('findSize();', 100); 54 } 55 56 //图片轮播动画 57 var FpicNum = Fpic.length; 58 Fpic.eq(0).fadeIn(); 59 var now = 0; 60 setInterval(function () { 61 62 if (now >= FpicNum - 1) { 63 Fpic.eq(FpicNum - 1).stop().fadeOut(500); 64 now = -1; 65 } 66 Fpic.eq(now).stop().fadeOut(500); 67 now++; 68 Fpic.eq(now).stop().fadeIn(500); 69 }, 3000); 70 </script> 71 72 </body> 73 </html>
作者：leona
版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接