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

 <!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-自适应全屏背景轮播动画的更多相关文章

  1. 基于jQuery带进度条全屏图片轮播代码

    基于jQuery带进度条全屏图片轮播代码.这是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  2. jquery全屏幻灯轮播焦点图

    <!--banner s--> <div class="banner"> <div class="hd"> <ul&g ...

  3. 全屏背景：15个jQuery插件实现全屏背景图像或媒体

    动态网站通常利用背景图像或预加载屏幕,以保证所有资源都加载到页面上,在浏览器中充分呈现.现在很多网站都炫耀自己的图像作为背景图像全屏背景,追溯到旧的Flash网站却用自己的方式在HTML资源重布局. ...

  4. 【Python全栈-CSS】CSS实现网页背景图片自适应全屏

    CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...

  5. css背景图自适应全屏显示

    前几天我在写一个前端页面的时候,需要用到全屏背景图,但是怎么写都不行(要么不全屏,要么不兼容Bootstrap的响应式布局).对,是我腊鸡 后来我在网上找的时候找到一个大神写的笔记,参(照)考(抄)之 ...

  6. 基于jQuery可悬停控制图片轮播代码

    基于jQuery可悬停控制图片轮播代码.这是一款可悬停切换全屏轮播jQuery幻灯片.效果图如下: 在线预览   源码下载 实现的代码: <!-- 轮播广告 --> <div id= ...

  7. css3全屏背景图片切换特效

    效果体验:http://hovertree.com/texiao/css3/10/ 一般做图片切换效果,都会使用JS或者jQuery脚本,今天发现,其实只用CSS也可以实现.试试效果吧. 效果图: 代 ...

  8. 天猫首页迷思之－jquery实现左侧广告牌图片轮播

    本次要实现的是天猫首页每个楼层左侧的图片轮播效果.见图: 功能点有:点击右箭头向右滑动:点击左箭头向左滑动:什么都不点自动滑动. 1.实现样式.简单分析一下大概的html结构.一个大的div里面包含两 ...

  9. jquery特效（4）—轮播图②（定时自动轮播）

    周末出去逛完街,就回公司好好地研究代码了,也算是把定时自动轮播程序写出来了,特意说明一下,这次的轮播图是在昨天随笔中jquery特效(3)—轮播图①(手动点击轮播)的基础上写出来的,也就是本次随笔展示 ...

随机推荐

  1. css相对定位和绝对定位

    相对定位,是对原来元素的位置为参照物进行定位: 绝对定位,如果父级没有定位,则针对HTML为参照物进行定位:如果父级有定位,则针对父元素为参照物进行定位

  2. C# Stream 和 byte[] 之间的转换

    一. 二进制转换成图片 MemoryStream ms = new MemoryStream(bytes); ms.Position = ; Image img = Image.FromStream( ...

  3. Java Web中请求转发和请求包含

    1.都是在一个请求中跨越多个Servlet 2.多个Servlet在一个请求中,他们共享request对象.就是在AServle中setAttribute()保存数据在BServlet中由getAtt ...

  4. MySQL 的相关语句（增删改查）（SQLyog软件实现）

    -- 创建雇员表:emp CREATE TABLE emp( empno INT, -- 员工编号 ename ), -- 员工姓名 job ), -- 员工工作 mgr INT, -- 领导编号 h ...

  5. IT人经济思维之投资 - 创业与投资系列文章

    前面笔者写过一个文(IT从业者的职业规划),主要通过笔者的从业道路的经验,介绍了IT从业者的职业选择道路问题,主要从技术.业务和管理三大方面进行了描述.然后,通过文(IT从业者的职业道路(从程序员到部 ...

  6. css sprite 调整大张图片中小图标的大小

    直接说解决方法: 假设一张拼合好的大图大小是:900 x 1000 px (如上图) 现在想取图中左上角的河马图标,并缩小图标的大小. 正常取图: .sprite { background: url( ...

  7. c#设计模式介绍

    序号 模式名称 模式描述 应用场景 例子 1 单例模式 (SigletonPattern) 保证一个类仅有一个实例,并提供一个访问它的全局访问点. • 单例类只能有一个实例. • 单例类必须自己创建自 ...

  8. CLR线程概览（下）

    作者:施懿民链接:https://zhuanlan.zhihu.com/p/20866017来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 同步: 托管代码 托管代码可 ...

  9. Reporting Services 错误案例一则

    遇到一个有意思的Reporting Services报表的案例,在2015-01-30号的凌晨20分左右的时候,有人发现Reporting Services的速度非常慢,而且最后有抛出异常,当时不知道 ...

  10. 图概PHP生命周期

    一图胜千言~ 这是之前根据网上大牛们的分析和跟着阅读了一点源码而做出来的总结.因为那时候困于对整个过程没有一个全面的认识,所以想自己做个图吧,那样看起来要更加直接了当,说不定还能会有一个更好的认识和更 ...