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

 <!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. 可轮播滚动的Tab选项卡

    前段时间有试着搭建个后台主题ui框架,有用到可支持滚动的Tab选项卡,模仿着H+后台主题ui框架中的代码造轮子改造了下,可惜代码在公司,不能把代码外发出来(感觉这样被限制了很多,对于这样的公司没办法, ...

  2. arcgis server10.2.2之地理编码服务发布

    1.地理编码工具(Geocoding Tools)locator制作     打开arcCatalog,找到工具箱ArcToolbox中的Geocoding Tools---Create Addres ...

  3. 使用 Arduino 和 LM35 温度传感器监测温度

    上一篇玩儿了一下Arduino入门,这次再进一步,用一下LM35温度传感器来监测当前温度.LM35温度传感器已经在Arduino入门套件里包含了,就是那个有三个脚的小黑块儿. 我们先把这些东西连起来. ...

  4. mac osx install mysql

    (1) download mysql dmg (2) install (3) /usr/local/mysql/bin/mysql -u root -p change password

  5. 【转】十个JavaScript中易犯的小错误，你中了几枪？

    目录 常见错误一:对于this关键词的不正确引用 常见错误二:传统编程语言的生命周期误区 常见错误三:内存泄露 常见错误四:比较运算符 常见错误五:低效的DOM操作 常见错误6:在for循环中的不正确 ...

  6. 使用dubbo分布式服务框架发布服务及消费服务

    什么是DUBBO DUBBO是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案. 准备工作 安装zookeeper ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服 ...

  7. Linux 克隆虚拟机引起的“Device eth0 does not seem to be present, delaying initialization”

    虚拟机Vmware上克隆了一个Red Hat Enterprise Linx启动时发现找不到网卡,如下所示,如果你在命令窗口启动网络服务就会遇到"Device eth0 does not s ...

  8. DPA 9.1.85 升级到DPA 10.0.352流程

    SolarWinds DPA的升级其实是一件非常简单的事情,这里介绍一下从DPA 9.1.95升级到 DPA 10.0.352版本的流程.为什么要升级呢? DPA给用户发的邮件已经写的非常清楚了(如下 ...

  9. XML 序列化与反序列化

    XML序列化与反序列化 1.将一个类转化为XML文件 /// <summary> /// 对象序列化成XML文件 /// </summary> /// <param na ...

  10. Sublime Text 技巧

    让sublime text2支持中文 安装Sublime Package Control 在Sublime Text 2上用Ctrl+-打开控制台并在里面输入以下代码,Sublime Text 2就会 ...