首页 > 代码库 > jquery-自适应全屏背景轮播动画

jquery-自适应全屏背景轮播动画

2024-08-19 10:21:55   217人阅读

实时自适应浏览器窗口大小的全屏背景轮播动画

 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-自适应全屏背景轮播动画


联系
我们