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. 实现一个Memcpy函数：将源指针所指的区域从起始地址开始的n个字节复制到目的指针所指区域

    首先肯定要先看看这两部分是不是有内存重叠?为什么? 1.因为如果有内存重叠(目的地址起始位置处于源指针所指区域之中),你再从起始位置复制的话,这样目的地址改变的时候将源地址内存里面存的东西给改变了,所 ...

  2. DTS结构及其编译方法

    一.主要问题1,需要了解dtsi与dts的关系2,dts的结构模型3,dts是如何被编译的,以及编译后会生成一个什么文件. 二.参考文字1,DTS(device tree source).dts文件是 ...

  3. iOS项目生成通用Windows应用

    WinObjc - 使用iOS项目生成通用Windows应用   Github上一周年的WinObjc项目最近发布了预览版本,终于等到了这一天.WinObjc项目就是Build 2015大会上微软宣布 ...

  4. sqlite在Android上的一个bug：SQLiteCantOpenDatabaseException when nativeExecuteForCursorWindow

    更多内容在这里查看 https://ahangchen.gitbooks.io/windy-afternoon/content/ ::-/com.company.product W/System.er ...

  5. SqlServer中代理作业实现总结

    今天弄SqlServer代理作业,弄了半天,把遇到的问题总结出来,主要是抨击一下Sql Server的Express版本.好了,看下面的正题. 首先,需要安装Sql Server Agent服务,该服 ...

  6. oracle 创建表空间详细介绍

    注意点: 1.如果在PL/SQL 等工具里打开的话,直接修改下面的代码中[斜体加粗部分]执行 2.确保路径存在,比如[D:\oracle\oradata\Oracle9i\]也就是你要保存文件的路径存 ...

  7. Oracle EBS-SQL (BOM-18):检查BOM与工艺路线对照.sql

    /*有工艺路线,无BOM清单*/ select msi.segment1, msi.description from apps.BOM_OPERATIONAL_ROUTINGS bor, apps.m ...

  8. 14.3.5 LOCK TABLES and UNLOCK TABLES Syntax

    14.3.5 LOCK TABLES and UNLOCK TABLES Syntax LOCK TABLES tbl_name [[AS] alias] lock_type [, tbl_name ...

  9. 在线获取访客QQ号码的原理及实现方法

    原文地址:http://www.piaoyi.org/network/get-qq-haoma-js.html 正 文: 最近,飘易收到不少在线获取网站访客QQ号码的促销推广邮件,有不少商用网站挖掘了 ...

  10. [Linux]shell编程基础/linux基础入门

    声明执行程序 #!/bin/bash 用来告诉系统使用/bin/bash 程序来执行该脚本.譬如python 脚本,可以这样写: #!/usr/bin/python   赋值和引用 赋值公式: 变量名 ...