下面提供仿支付宝首页的效果图，淡入淡出的，
直接上代码
<!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>
拷贝代码就可以运行。
最近项目中也用到这样的效果，下一篇将提供
相关推荐
在iOS应用开发中，"高仿支付宝首页头部"是一个常见的设计需求，主要是为了提供与支付宝应用相似的用户体验。这个项目采用Swift编程语言实现，表明它利用了Swift的强大特性和简洁语法来构建用户界面。Swift是Apple于...
下面将详细讨论如何在Android中创建和定制一个仿支付宝账单统计图。 首先，我们需要选择一个合适的图表库来帮助我们实现这一功能。在Android社区中，有许多优秀的第三方图表库可供选择，如MPAndroidChart、...
MUI包含诸如下拉刷新、侧滑菜单、轮播图、弹出框等组件，这些都是在仿支付宝APP页面中可能用到的。通过MUI，开发者能够轻松实现响应式布局，确保页面在不同屏幕尺寸的设备上都能正常显示。 JavaScript，作为Web开发...
综上所述，"仿支付宝账单列表"的实现涉及了Android的ListView组件、数据排序、资源优化、数据库操作、事件监听以及Sticky Header效果的实现等多个知识点。开发者需要具备扎实的Android基础知识，以及对用户交互设计...
**jQuery图片轮播插件详解：仿支付宝2013版全屏幻灯片淡出淡进效果** 在网页设计中，图片轮播插件是一种常见的元素，它能够以动态方式展示多张图片，增强用户体验。本教程将深入探讨一个特别的jQuery插件，它模仿了...
在IT行业中，我们经常需要创建各种用户界面特效来提升用户体验，而"闪动、上升的数字（仿支付宝）"这个Demo就是这样的一个实例。它主要展示了两种特效：RiseNumberTextView和RunningTextView，这两种效果都是为了...
在这个仿支付宝对账单的项目中，我们聚焦于如何使用饼状图来展示用户的消费构成，以及如何实现交互功能，如时间筛选。下面将详细探讨这个项目中的关键知识点。 首先，我们需要一个合适的库来绘制饼状图。在这个例子...
本文将深入探讨如何实现“仿支付宝蚂蚁森林能量球效果”，这是一个基于Android平台的项目，主要展示了能量球上下浮动的动态视觉效果。 首先，我们要理解蚂蚁森林这款应用的核心概念。它是一款通过用户的低碳行为...
【仿支付宝二维码扫描】是一种常见的移动应用功能，用于识别和解析二维码，以便进行支付、分享信息等活动。在本文中，我们将深入探讨二维码扫描技术、支付宝的实现方式以及如何将这样的功能集成到自己的应用程序中。...
在iOS开发中，"仿支付宝首页图标移动"是一项常见的视觉效果实现，主要涉及到视图动画这一关键知识点。视图动画是iOS应用中增强用户体验的重要工具，它可以为用户界面增添动态感，使应用更加生动和吸引人。在这个项目...
"Android仿支付宝九宫图效果"就是一个很好的示例，它旨在模仿支付宝应用中的图片展示方式，通常用于展示用户的消费记录、订单状态等信息。这种布局将九张图片或图标以3x3的形式排列，既美观又实用。 实现这个效果...
这一次给大家带来的依旧是最简单的页面效果图--Android仿支付宝首页GridView的网格效果-不能够换位置 原理也很简单，就是gridview有一个背景颜色，也就是你所看见的分割线的颜色，然后还有一个就是每一个子布局的...
**jQuery图片轮播插件——仿支付宝2013版全屏图片幻灯片淡出淡进切换效果详解** 在Web开发中，图片轮播插件是常见的元素，用于展示多张图片，常用于产品展示、广告轮播等场景。jQuery作为一款强大的JavaScript库，...
本项目“仿支付宝首页”旨在模仿支付宝应用程序的主界面，为学习者提供一个实践平台，深入了解Android UI组件、布局管理和事件处理等核心技能。 首先，我们来看支付宝首页的主要构成部分。它通常包含以下几个关键...
本文将深入探讨如何使用Objective-C（简称OC）语言来实现一个与支付宝类似的头部动画效果，帮助开发者提升应用的交互性和视觉吸引力。 首先，我们要了解头部动画的基本构成。通常，这种动画涉及到视图的滑动、透明...
在当今的数字支付时代，用户对支付安全的需求越来越高，因此，模拟像支付宝...对于想要深入了解和实践web前端开发的朋友们，可以将本文介绍的技术点作为参考，动手实现一个属于自己的仿支付宝多方框输入支付密码效果。
本项目“（Pony）高德地图poi实现，仿支付宝到位效果”旨在实现类似支付宝到位的效果，利用高德地图API来动态展示POI（Point of Interest）数据，并在地图上移动时实时更新Marker信息。 首先，我们要理解什么是POI...
【仿支付宝红包扫描demo】是一种基于增强现实（AR）技术的应用程序开发实例，它旨在模拟支付宝的红包扫描功能。在支付宝的实际应用中，用户可以通过摄像头扫描特定的图像或二维码来领取红包，这是一种互动性强且富有...
支付宝首页焦点图是一种常见的网页设计元素，用于展示网站或应用的重要信息或促销活动。这个项目是一对一仿制支付宝首页的焦点图组件，确保在所有主流浏览器，包括古老的IE6，都能正常工作，为用户提供一致的浏览...