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. Python学习笔记(五)Python的切片和迭代

    切片 Python提供了切片操作符,可以对list.tuple.字符串进行截取操作. list中的切片应用 语法如下: >>> L = ['Michael', 'Sarah', 'T ...

  2. SQL Server 性能篇- 碎片

    本文分为两个问题: 第一,碎片是什么:第二,碎片怎么处理: 现在,来找解决这两个问题:  一.碎片是什么 说到碎片,就要提到索引了,索引用着挺爽的啊!是的,一旦索引建立,我们搜索数据的效率就提高了:然 ...

  3. JavaScript 获取 Div 的坐标

    示例代码: <html> <head> <script> function CPos(x, y) { this.x = x; this.y = y; } /** * ...

  4. ZigBee技术简介

    Zigbee的由来 在蓝牙技术的使用过程中,人们发现蓝牙技术尽管有许多优点,但仍存在许多缺陷.对工业,家庭自动化控制和遥测遥控领域而言,蓝牙技术显得太复杂,功耗大,距离近,组网规模太小等,……而工业自 ...

  5. Boost程序库完全开发指南——深入C++“准”标准库（第3版）

    内容简介  · · · · · · Boost 是一个功能强大.构造精巧.跨平台.开源并且完全免费的C++程序库,有着“C++‘准’标准库”的美誉. Boost 由C++标准委员会部分成员所设立的Bo ...

  6. linux下修改ip地址，默认网关以及DNS

    *修改IP地址 即时生效: ifconfig eth0 192.168.1.100  netmask 255.255.255.0 重启生效: vim  /etc/sysconfig/network-s ...

  7. linux之SQL语句简明教程---TRIM

    SQL 中的 TRIM 函数是用来移除掉一个字串中的字头或字尾.最常见的用途是移除字首或字尾的空白.这个函数在不同的资料库中有不同的名称: MySQL: TRIM( ), RTRIM( ), LTRI ...

  8. Unity doesn't load, no Launcher, no Dash appears

    1. 重新安装 ubuntu-desktop不起作用. Enter the following commands:- Ctrl+Alt+F1 login there by user name and ...

  9. virtualbox 复制多个虚拟机 （宿主机redhat）

    我用VirtualBox做了一个winxp虚拟镜像. 想实现不重新安装而直接复制几个,也就是同时装载几个虚拟机. 但是直接复制已安装好机子的vdi文件,系统会报uuid已存在的错误. 所以,就需要修改 ...

  10. Linux 下如何安装软件？

    http://zhidao.baidu.com/link?url=OkQCOZtVMXhasC8x9zFTZOumsFKf0WW25Ckr2wBF1xO08EsjrBpnMaTBlIAUYdxZ408 ...