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

 <!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. Sharepoint学习笔记—习题系列--70-576习题解析 -(Q138-Q140)

    Question  138 You are designing a SharePoint 2010 application that will deploy a Web Part assembly. ...

  2. IOS开发基础知识--碎片31

    1:UITableViewCell drawInRect 在iOS7中失败 解决办法,把Cell里的布局移到新建的View里面,在View里面实现DrawInRect,然后在Cell里面加载View, ...

  3. IOS-WebViewJavascriptBridge使用说明

    下面来说一下WebViewJavascriptBridge在ios端怎么样使用. 首先确保一份已经配好功能的html文件. 1.初始化一个webview(viewdidload) UIWebView* ...

  4. python之选课系统详解[功能未完善]

    作业需求 思路:1.先写出大体的类,比如学校类,学生类,课程类--   2.写出类里面大概的方法,比如学校类里面有创建讲师.创建班级-- 3.根据下面写出大致的代码,并实现其功能       遇到的困 ...

  5. Lucene 时间排序

    在Lucene4.4中,想要实现搜索结果按照时间倒序的效果:如果两个文档得分相同,那么就按照发布时间倒序排列:否则就按照分数排列.这种效果在Lucene4.6中实现起来极其简单,直接利用search接 ...

  6. Petya勒索木马

    同事小学妹神好奇心,在陌生群里下载了个软件,接下来就是自动重启无法开机. 找我一看,凭我专业帮妹纸装系统多年的经验,起初也不觉得有啥困难,兼容模式下重启,接下来出现这个: 按下any key后: 试了 ...

  7. SqlServer--模糊查询-通配符

    查询所有姓张的同学Select * from student where left(sName,1)='张'   看上去很美,如果改成查询名字中带亮的学生怎么做?换一种做法 like  Select  ...

  8. Dictionary摘抄

    Dictionary,字典,键值对集合. 下面的代码示例创建一个空的带有字符串键的字符串 Dictionary,并使用 Add 方法添加一些元素.该示例演示在尝试添加重复的键时 Add 方法引发Arg ...

  9. python 常用模块之os、sys、shutil

    目录: 1.os 2.sys 3.shutil 一.os模块 说明:os模块是对操作系统进行调用的接口 os.getcwd() #获取当前工作目录,即当前python脚本工作的目录路径 os.chdi ...

  10. 多重共线性的解决方法之——岭回归与LASSO

          多元线性回归模型 的最小二乘估计结果为 如果存在较强的共线性,即 中各列向量之间存在较强的相关性,会导致的从而引起对角线上的 值很大 并且不一样的样本也会导致参数估计值变化非常大.即参数估 ...