From here:http://xiaomiya.iteye.com/blog/2047728

请看效果图：

完整代码如下：

<!DOCTYPE HTML>

<html>

<head>

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

<title>仿支付宝首页背景切换效果</title>

<style type="text/css">

*{ margin:0; padding: 0;}

.bn-alp { width:100%; height:400px; position:relative; }

.bn-alp ul,.bn-alp li { margin:0; padding:0; list-style:none; }

.bn-alp .box { height:100%; position:relative; }

.bn-alp .box li { width:100%; height:400px; background-position:50% 50%; background-size:cover; position:absolute; top:0; left:0; z-index:10; }

.bn-alp .box li.on { z-index:99; }

.bn-alp .box li img.bg { display:none; }

.bn-alp .i { bottom:5px; left:50%; margin-left:-50px; text-align:center; position:absolute; z-index:100;}

.bn-alp .i i { display:inline-block; margin-right:10px; width:16px; height:16px; background: #000; cursor:pointer; }

.bn-alp .i i.on { background:red; }

</style>

<script src="http://code.jquery.com/jquery-1.11.0.js"></script>

<script type="text/javascript">

$(function(){

  var bn_alp;// 定义动画变量

  var Time = 3000;// 自动播放间隔时间 毫秒

  var num = 1000;// 切换图片间隔的时间 毫秒

  var page = 0;// 定义变量

  var len = $( ".bn-alp .box li" ).length;// 获取图片的数量

  $( ".bn-alp .box li" ).each(function()

  {

    $(this).css( "opacity", 0 );

    $(this).css( "background-image","url(" + $(this).find('img.bg').attr('src') + ")");

    $( ".bn-alp .i" ).append('<i></i>');

  });   // 设置全部的图片透明度为0

  $( ".bn-alp .box li:first" ).css( "opacity", 1 ); // 设置默认第一张图片的透明度为1

  $( ".bn-alp .i i" ).eq(0).addClass("on");

  function fun()// 封装

  {

    $( ".bn-alp .i i" ).eq(page).addClass("on").siblings('i').removeClass( "on" );     // 切换小点

    $( ".bn-alp .box li" ).eq(page).addClass("on").animate({"opacity":1},num).siblings('li').removeClass( "on" ).animate({"opacity":0},num);// 切换图片

  }

  function run()// 封装

  {

    if( !$(".bn-alp .box li" ).is( ":animated" ))// 判断li是否在动画

    {

      if( page == len - 1 )// 当图片切换到了最后一张的时候

      {

        page = 0;  // 把page设置成0 又重新开始播放动画

        fun();

      } else {// 继续执行下一张

        page++;

        fun();

      }

    }

  }

  $(".bn-alp .i i").click( function()// 点击小点

  {

    clearInterval( bn_alp );//鼠标点击下面的点就清除动画开始新的动画。

    //if( !$( ".bn-alp .box li" ).is( ":animated" ) )// 判断li是否在动画

    //{

      var index = $( ".bn-alp .i i" ).index( this );// 获取点击小点的位置

      page = index;// 同步于page

      fun();

    //}

  });

  $( ".bn-alp" ).hover(function()// 鼠标放上去图片的时候清除动画

  {

    clearInterval( bn_alp );

  },function()// 鼠标移开图片的时候又开始执行动画

  {

    bn_alp = setInterval( run, Time );

  }).trigger( "mouseleave" );

});

</script>

</head>

<body>

<div class="bn-alp">

  <ul class="box">

    <li class="on">

      <img src="https://i.alipayobjects.com/e/201210/1SqQ3MovmW.jpg" class="bg" />

    </li>

    <li>

      <img src="https://i.alipayobjects.com/e/201210/1SqdO0g4BA.jpg" class="bg" />

    </li>

    <li>

      <img src="https://i.alipayobjects.com/e/201210/1SqZEKwRls.jpg" class="bg" />

    </li>

    <li>

      <img src="https://i.alipayobjects.com/e/201210/1SppXBk7PB.jpg" class="bg" />

    </li>

  </ul>

  <div class="i"></div>

</div>

</body>

</html>

CSS实现页面背景自动切换功能的更多相关文章

  1. html+css+jQuery+JavaScript实现tab自动切换功能

    tab1.html内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  2. jquery背景自动切换特效

    查看效果网址:http://keleyi.com/a/bjad/4kwkql05.htm 本特效的jquery版本只支持1.9.0以下. 代码如下: <!DOCTYPE html PUBLIC ...

  3. tabs自动切换功能的实现

    <html><head><!-- Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href= ...

  4. Android借助Handler，实现ViewPager中页面的自动切换（转）

    在很多电商网页及app上都有自动切换的商品的推广快,感觉体验挺不错的,正好今天学习使用ViewPager,因此也实现了一个功能类似的demo. 下面是其中的两个截图:           实现一个自动 ...

  5. Python3实现Win10桌面背景自动切换

    [本文出自天外归云的博客园] 得空写了个自动切换桌面背景图片的小程序.再不写python就要扔键盘了,对vue还有那么一点好感,天天php真是有够烦. 准备工作 准备个文件夹放在桌面上,平时看到什么高 ...

  6. js 背景自动切换

    //首页自动更换背景特效开始============================================ var curIndex = 0; //时间间隔(单位毫秒),每秒钟显示一张,数组 ...

  7. 使Eclipse下支持编写HTML/JS/CSS/JSP页面的自动提示。

    我们平时用eclipse开发jsp页面时智能提示效果不太理想,今天用了两个小时发现了eclipse也可以像Visual Studio 2008那样完全智能提示HTML/JS/CSS代码,使用eclip ...

  8. 配置Eclipse编写HTML/JS/CSS/JSP页面的自动提示。

    我们平时用eclipse开发jsp页面时智能提示效果不太理想,今天用了两个小时发现了eclipse也可以像Visual Studio 2008那样完全智能提示HTML/JS/CSS代码,使用eclip ...

  9. 配置Eclipse编写HTML/JS/CSS/JSP页面的自动提示

    我们平时用eclipse开发jsp页面时智能提示效果不太理想,今天用了两个小时发现了eclipse也可以像Visual Studio 2008那样完全智能提示HTML/JS/CSS代码,使用eclip ...

随机推荐

  1. OpenLayers 3加载本地Google切片地图

    OpenLayers  提供了ol.source.XYZ 接口用以加载切片地图. 本地切片地图是用地图切片下载器下载的Google道路图层,由于软件未激活,所以每张切片地图上都有软件作者的联系方式,请 ...

  2. Linux系统下用C语言获取MAC地址

    最近在做一个小程序,需要用到在linux系统里编写C程序从而获取MAC地址,从网上搜了一遍,想总结一下.如果你就只需要单个功能的程序,可以采用方法一,见代码1,一般最好能够封装起来,写成获取MAC地址 ...

  3. codeforces 518A. Vitaly and Strings

    A. Vitaly and Strings time limit per test 1 second memory limit per test 256 megabytes input standar ...

  4. 谈谈我对Java中CallBack的理解

    谈谈我对Java中CallBack的理解 http://www.cnblogs.com/codingmyworld/archive/2011/07/22/2113514.html CallBack是回 ...

  5. ID3决策树算法原理及C++实现(其中代码转自别人的博客)

    分类是数据挖掘中十分重要的组成部分.分类作为一种无监督学习方式被广泛的使用. 之前关于"数据挖掘中十大经典算法"中,基于ID3核心思想的分类算法C4.5榜上有名.所以不难看出ID3 ...

  6. ios控制器modal跳转

    1. http://www.cnblogs.com/smileEvday/archive/2012/05/29/presentModalViewController.html 2012年5月- Pre ...

  7. 解决ZBarSDK 中文出现乱码

    使用ZBarSDK进行二维码解释时出现乱码是因为ZBarSDK在解释时使用的字符集不对,需在ZBarSDK的源码中更正. 1.可以到http://sourceforge.net/p/zbar/_lis ...

  8. apache的斜杠问题

    APACHE默认情况下,网页目录的最后必须加入斜杠“/",比如 可以浏览http://www.example.com/abc/,但是不能浏览http://www.example.com/ab ...

  9. Python OpenGL学习（1）： 环境配置及错误篇

    系统环境是:Ubuntu 14.04 个人首次接触OpenGL,学到哪就写到哪. 1.模块安装: sudo apt-get install python-openglpip install PyOpe ...

  10. Stopwatch 和TimeSpan介绍【转】

    1.使用 Stopwatch 类 (System.Diagnostics.Stopwatch) Stopwatch 实例可以测量一个时间间隔的运行时间,也可以测量多个时间间隔的总运行时间.在典型的 S ...