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

 <!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. 如何面试前端工程师：GitHub 很重要

    编者注:下面这篇文章从面试官的角度介绍到面试时可能会问到的一些问题. 我在Twitter和Stripe的一部分工作内容是面试前端工程师.其实关于面试你可能很有自己的一套,这里我想跟你们分享一下我常用的 ...

  2. 11－C语言指针&一维数组&字符串

    一.用指针遍历数组元素 1.最普通的遍历方式是用数组下标来遍历元素 1 // 定义一个int类型的数组 2 int a[4] = {1, 2, 3, 4}; 3 4 int i; 5 for (i = ...

  3. javascript深入浅出（imooc）

    第一章 数据类型 1,六种数据类型:原始类型(number,string,boolean,null,undefined) + object对象(Function Array Date) 2,隐式转换: ...

  4. SQL Server中使用PIVOT行转列

    使用PIVOT行转列 1.建表及插入数据 USE [AdventureDB] GO /****** Object: Table [dbo].[Score] Script Date: 11/25/201 ...

  5. MySQL初始化的正确姿势

    1. 背景 mysql安装教程很多,但是有不少讲得过于简单,没有考虑到安全问题.比如说,一些教程里,只设置一个root用户,并且对外网公开,一来容易被破解密码(用户名固定,破解难度自然降了一大截,而且 ...

  6. 在Cortex-M系列上如何准确地做us级延时？

    前几天刚好同事问起在Cortex-M上延时不准的问题,在网上也没找到比较满意的答案,干脆自己对这个问题做一个总结. 根据我们的经验,最容易想到的大概通过计算指令周期来解决.该思路在Cortex上并不是 ...

  7. html中的meta详解

    1  name=viewport <meta name="viewport" content="width=device-width,initial-scale=1 ...

  8. [Django]模型学习记录篇--基础

    模型学习记录篇,仅仅自己学习时做的记录!!! 实现模型变更的三个步骤: 修改你的模型(在models.py文件中). 运行python manage.py makemigrations ,为这些修改创 ...

  9. 使用Vmware虚拟机部署开发环境之Mac OS X系统安装

    一.使用VMware虚拟机部署Swift开发环境所需工具: Vmware Workstation 10.0虚拟机软件 VM安装Mac解锁工具Unlock 苹果操作系统(Mac OS X Maveric ...

  10. 洛谷P2158 [SDOI2008]仪仗队

    题目描述 作为体育委员,C君负责这次运动会仪仗队的训练.仪仗队是由学生组成的N * N的方阵,为了保证队伍在行进中整齐划一,C君会跟在仪仗队的左后方,根据其视线所及的学生人数来判断队伍是否整齐(如下图 ...