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. 利用VisualVM监测Azure云服务中的Java应用

    在做Java开发的时候,我们需要在上线之前对程序进行压力测试,对程序的性能进行全面的监控,了解JVM的CPU,内存,GC,classes,线程等等信息,或者在程序上线运行的过程当中以便于诊断问题或者对 ...

  2. 再次优化NGINX+php-fpm上传

    上次写了一篇nginx+php-fpm优化上传,一位博友留言介绍了,第三方nginx upload module http://www.grid.net.ru/nginx/upload.en.html ...

  3. Nginx 配置指令的执行顺序（十一）

    紧跟在 post-access 阶段之后的是 try-files 阶段.这个阶段专门用于实现标准配置指令 try_files 的功能,并不支持 Nginx 模块注册处理程序.由于 try_files  ...

  4. 链表k个节点反向

    问题: 以k个元素为一组,反转单向链表.比如: 输入: 1->2->3->4->5->6->7->8->null and k = 3 输出:3-> ...

  5. HDOJ-1041 Computer Transformation（找规律+大数运算）

    http://acm.hdu.edu.cn/showproblem.php?pid=1041 有一个初始只有一个1的串 每次都按①0 -> 10;②1 -> 01;这两条规则进行替换 形如 ...

  6. #include <boost/weak_ptr.hpp>

    弱指针boost::weak_ptr的定义在boost/weak_ptr.hpp里.到目前为止介绍的各种智能指针都能在不同的场合下独立使用.相反,弱指针只有在配合共享指针一起使用时才有意义.因此弱指针 ...

  7. C# 中的委托和事件[转自张子扬]

    文中代码在VS2005下通过,由于VS2003(.Net Framework 1.1)不支持隐式的委托变量,所以如果在一个接受委托类型的位置直接赋予方法名,在VS2003下会报错,解决办法是显式的创建 ...

  8. 最新首发Eclipse+CDT+android-ndk写纯c++安卓应用（附openGL Es）

    首先下载eclipse和cdt.我的版本依次是:Version: Indigo Service Release 2和Version: 1.0.0.201202111925,再下载windows的ndk ...

  9. 聚类算法初探（六）OPTICS

    最近由于工作需要,对聚类算法做了一些相关的调研.现将搜集到的资料和自己对算法的一些理解整理如下,供大家参考. 另外在算法代码方面,我也做了一些实现(包括串行和并行),欢迎感兴趣的朋友探讨和交流. 第一 ...

  10. VMware虚拟机与主机联通及配置上网

    vmware版本:10.0.0 build-1295980,安装redhat enterprise linux 5.8 一.物理机与虚拟机联通,但不联网 1.虚拟网络VMnet1设置: 此时,物理主机 ...