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

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

 <html>

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

     <meta charset="utf-8" />

     <style>

         * { margin: 0; border: 0; padding: 0; }

         ul, li { list-style: none; }

         html, body { background-color: #808080; }

         html, body, .banner, .banner li { width: 100%; height: 100%; min-width: 800px; min-height: 600px; /; /*这里的最小高宽是为了防止窗口太小图片变形*/ }

         .banner { position: relative; overflow: hidden; }

         .banner li { position: absolute; top: 0; left: 0; }

         .banner li { display: none; }

     </style>

     <script src="js/jquery-1.10.2.js"></script>

     <script src="js/BgLoop.js"></script>

 </head>

 <body>

     <ul class="banner">

         <li><a href="#"><img src="img/1.jpg" /></a></li>

         <li><a href="#"><img src="img/2.jpg" /></a></li>

         <li><a href="#"><img src="img/3.jpg" /></a></li>

         <li><a href="#"><img src="img/4.jpg" /></a></li>

     </ul>

     <script>

         var Fpic = $(".banner li");

         var Lpic = Fpic.find("img");

         //图片自适应浏览器窗口大小

         var winW, winH;

         function findSize() {

             if (window.innerHeight && window.innerWidth) {

                 winW = window.innerWidth;

                 winH = window.innerHeight;

             }

             if (document.documentElement.clientHeight && document.documentElement.clientWidth) {

                 winW = document.documentElement.clientWidth;

                 winH = document.documentElement.clientHeight;

             }

             if (document.body.clientHeight && document.body.clientWidth) {

                 winW = document.body.clientWidth;

                 winH = document.body.clientHeight;

             }

             Lpic.css({ "width": winW, "height": winH });

         }

         window.onload = findSize;

         window.onresize = window_resize;

         var resizeTimeoutId;

         function window_resize(e) {

             window.clearTimeout(resizeTimeoutId);

             resizeTimeoutId = window.setTimeout('findSize();', 100);

         }

         //图片轮播动画

         var FpicNum = Fpic.length;

         Fpic.eq(0).fadeIn();

         var now = 0;

         setInterval(function () {

             if (now >= FpicNum - 1) {

                 Fpic.eq(FpicNum - 1).stop().fadeOut(500);

                 now = -1;

             }

             Fpic.eq(now).stop().fadeOut(500);

             now++;

             Fpic.eq(now).stop().fadeIn(500);

         }, 3000);

     </script>

 </body>

 </html>
作者：leona
原文链接：http://www.cnblogs.com/leona-d/p/5950280.html
秒客网

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

相关文章
