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. 什么是JS事件冒泡

    什么是JS事件冒泡? 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个 ...

  2. C语言的本质（15）——C语言的函数接口入门

    C语言的本质(15)--C语言的函数接口 函数的调用者和其实现者之间存在一个协议,在调用函数之前,调用者要为实现者提供某些条件,在函数返回时,实现者完成调用者需要的功能. 函数接口通过函数名,参数和返 ...

  3. 【转】关于Activity和Task的设计思路和方法

    Activity和Task是Android Application Framework架构中最基础的应用,开发者必须清楚它们的用法和一些开发技巧.本文用大量的篇幅并通过引用实例的方式一步步深入全面讲解 ...

  4. 电子科大POJ "敲错键盘"

    C-sources: #include<stdio.h> #define N 20 int main() { int i,j; ]={'Q','W','E','R','T','Y','U' ...

  5. hdu 2222 Keywords_ac自动机模板

    题意:给你n个单词,再给你一串字符,求在字符中有多少个单词出现过 #include <iostream> #include<cstdio> #include<cstrin ...

  6. rand,randn,randi函数区别

    1,rand 生成均匀分布的伪随机数.分布在(0~1)之间   主要语法:rand(m,n)生成m行n列的均匀分布的伪随机数             rand(m,n,'double')生成指定精度的 ...

  7. jdbc详解（三）

    开源数据库连接池 l 现在很多 WEB 服务器 ( Weblogic , WebSphere , Tomcat) 都提供了 DataSoruce 的实现,即连接池的实现.通常我们把 DataSourc ...

  8. nm命令中符号类型详解

    摘自http://blog.csdn.net/solmyr_biti/article/details/6565479 nm命令介绍的很多,但大多不介绍其函数符号标志的含义.最近在调试动态库时常用到,其 ...

  9. #include <boost/array.hpp>

    Boost的array,元素可以是std::string #include <iostream> #include <string> #include <boost/ar ...

  10. 泛泰A900 刷4.4专用中文TWRP2.7.1.1版 支持自己主动识别手机版本号（全球首创）

    因本人手上的A900S已砖, 所以临时弄不了ROM了, 先上传之前已经弄好的刷4.4专用的新版TWRP recovery 2.7.1.1  这个版本号是我自己定义的,为差别之前公布的2.7.0.0版( ...