下面提供仿支付宝首页的效果图，淡入淡出的，
直接上代码
<!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>
拷贝代码就可以运行。
最近项目中也用到这样的效果，下一篇将提供
相关推荐
样式可以看这里：http://blog.csdn.net/the_path/article/details/38851841
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片淡出淡进切换效果，免费送你们
Android仿支付宝九宫图效果,UI设计优美,推荐给大家!
这是用jquery做的一个图片轮播插件仿支付宝2013版全屏图片幻灯片淡出淡进切换效果
这一次给大家带来的依旧是最简单的页面效果图--Android仿支付宝首页GridView的网格效果-不能够换位置 原理也很简单，就是gridview有一个背景颜色，也就是你所看见的分割线的颜色，然后还有一个就是每一个子布局的...
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片淡出淡进切换效果演示地址：http://www.jq22.com/jquery-info366
MenuManage-Imitate-Alipay 仿支付宝首页应用管理(拖拽排序，添加删除) 效果图 Demo
( 2014最强商业模版仿韩都衣舍+支付宝插件+顶级封面插件+首页通栏广告+手机触屏版+效果图ecshop2.7.3（整站带测试数据） 测试可用
做了一个仿支付宝进入后台多任务缩略图模糊效果的demo，双击HOME键不产生模糊效果，进入后台才有模糊效果（可根据自己的需求在appdelegate代理方法里修改下），打开客户端后模糊效果消失，模糊程度可以自己控制。
poi的信息检索，移动的时候动态的显示marker的数据poi的信息检索，移动的时候动态的显示marker的数据poi的信息检索，移动的时候动态的显示marker的数据
HTML5 Canvas 仿支付宝芝麻信用统计图表特效，一个建立在HTML5基础上的统计图表，动态效果显示，看上去十分美观且显专业，在支付宝芝麻信用中就是采用的这种风格。这些图表效果除了使用HTML5 Canvas技术外，还使用了...
我们首先需要分析怎么把效果图拆分成几种布局 效果图 从上面的图片中我们可以把布局分为三种类型，其中第一种布局le是 第二种布局类型是： 第三种布局类型 使用RecyclerView加载多种布局，很多人...
通过Android自带的past类自定义的一个仿支付宝的折线图，X,Y轴是写死的，需要重新赋值
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片淡出淡进切换效果,在自己的页面里一定要引入jquery 代码如下:”flexslider”> ”slides”> <li xss=removed></li> <li xss=removed></li> <li style=”...
利用collection view实现支付宝上方格的效果。
本文实例讲述了JS+CSS实现仿支付宝菜单选中效果代码。分享给大家供大家参考。具体如下： 这是一个漂亮的JS+CSS仿支付宝菜单，总体风格和形式与支付宝的菜单没什么两样，细心会发现这是一个CSS爱好者自己手功完成的，...
本项目是一个高仿微米UI的项目，虽然是个UI项目但是很多东西还是值得学习和借鉴的，例如里面漂亮的仿IOS开关、仿QQ的圆角退出登录按钮 、字母索引、图文混编、九宫格图片多选、二维码扫描、仿微信的附近的人列表、仿...
一个仿支付宝扫一扫的功能，实现网格状动画，相册图片识别，开关灯，可以快速集成到项目中。
1. 效果图 2. MPAndroidChart 我们用的是MPAndroidChart打开链接来实现的效果，它可以实现柱状图，饼状图等。 使用方法 1. 添加依赖 你可以选择在build.gradle中添加依赖。 dependencies { compile '...
最近支付宝刚刚升级,然后看了一眼里面的芝麻信用分雷达图觉得很不错，所以就自己动手实践了下，这篇文章主要介绍了Android如何自定义控件，模仿支付宝上芝麻信用分雷达图的效果，有需要的朋友们可以参考借鉴。