jquery-自适应全屏背景轮播动画
Posted YanEr、
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery-自适应全屏背景轮播动画相关的知识，希望对你有一定的参考价值。
实时自适应浏览器窗口大小的全屏背景轮播动画
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 </head> 18 <body> 19 <ul class="banner"> 20 <li><a href="#"><img src="img/1.jpg" /></a></li> 21 <li><a href="#"><img src="img/2.jpg" /></a></li> 22 <li><a href="#"><img src="img/3.jpg" /></a></li> 23 <li><a href="#"><img src="img/4.jpg" /></a></li> 24 </ul> 25 26 <script> 27 28 //图片自适应浏览器窗口大小 29 var Lpic = $(".banner li img"); 30 var winW, winH; 31 function findSize() { 32 if (window.innerHeight && window.innerWidth) { 33 winW = window.innerWidth; 34 winH = window.innerHeight; 35 } 36 if (document.documentElement.clientHeight && document.documentElement.clientWidth) { 37 winW = document.documentElement.clientWidth; 38 winH = document.documentElement.clientHeight; 39 } 40 if (document.body.clientHeight && document.body.clientWidth) { 41 winW = document.body.clientWidth; 42 winH = document.body.clientHeight; 43 } 44 Lpic.css({ "width": winW, "height": winH }); 45 } 46 window.onload = findSize; 47 window.onresize = window_resize; 48 var resizeTimeoutId; 49 function window_resize(e) { 50 window.clearTimeout(resizeTimeoutId); http://localhost:17657/study.html# 51 resizeTimeoutId = window.setTimeout(‘findSize();‘, 100); 52 } 53 54 //图片轮播动画 55 var Fpic = $(".banner li"); 56 var FpicNum = Fpic.length; 57 Fpic.eq(0).fadeIn(); 58 var now = 0; 59 setInterval(function () { 60 if (now >= FpicNum - 1) { 61 Fpic.eq(FpicNum - 1).stop().fadeOut(500); 62 now = -1; 63 } 64 Fpic.eq(now).stop().fadeOut(500); 65 now++; 66 Fpic.eq(now).stop().fadeIn(500); 67 }, 3000); 68 </script> 69 70 </body> 71 </html>
以上是关于jquery-自适应全屏背景轮播动画的主要内容，如果未能解决你的问题，请参考以下文章