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     <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

原文链接：http://www.cnblogs.com/leona-d/p/5950280.html 

版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接

posted @ 2016-11-07 00:21  YanEr、  阅读(2830)  评论(0)  编辑  收藏  举报