jquery-自適應全屏背景輪播動畫

本文轉載自查看原文 2016-11-07 00:21 2373 Web

實時自適應瀏覽器窗口大小的全屏背景輪播動畫

 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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jquery自適應寬度輪播圖 Adaptive Backgrounds – jQuery 自適應背景插件如何實現網頁背景圖片自適應全屏？ jquery全屏背景輪播切換的登錄頁 jQuery自適應-3D旋轉輪播圖 CSS實現網頁背景圖片自適應全屏,自適應背景圖片 fullPage全屏高度自適應 CSS背景圖怎么自適應全屏（手機或者電腦） CSS背景圖怎么自適應全屏（手機或者電腦） CSS實現網頁背景圖片自適應全屏