Jquery,图片依次进入内容区域，幻灯片

2014年10月28日

忙了一段时间，忽然发现自己已经很久没有继续写总结，写博客，很多问题没有能做笔记，这是一种损失。以后要多多记笔记。

昨天技术经理让实现一个效果，让一组图片一次进入内容区域。有一个排列效果。这个效果可用于首页banner。或者全屏的显示图片导航。（全屏的话，可能需要计算屏幕的大小，然后再去）。目前的代码实现了一定程度上的动态效果，但是还有很大发掘的潜力。

下面是菜鸟代码，希望有幸被大神以及和我一样初学者看到，提出意见，我们一起交流。

html代码

<div class="content">
<span>A</span>
<span class="bg01">B</span>
<span class="bg02">C</span>
<span class="bg03">D</span>
<span class="bg04">E</span>
</div>

css代码

body{margin: 0;padding: 0;}
.content{width: 100%;height: 500px;position: relative;overflow: hidden;background: yellow;}
.content span{height: 100%;osition: absolute;top: 0;background: cyan;}
.content .bg01{background: pink;}
.content .bg02{background: red;}
.content .bg03{background: blue;}
.content .bg04{background: #ccc;}
.content .bg05{background: #fff;}

js代码：

$(document).ready(function(){
var index=0;//初始化角标
var len=$(".content span").length;//获取长度
var LR=100/len;//获取要移动的百分比
var ziDong;//自动播放方法
var T=1500;//自动播放的时间
var T2=1500;//滑动用的时间

//动态的根据span的个数改变span的宽度。
$(".content span").css({right:-LR+'%',width:LR+'%'});

ziDong=setInterval(function(){
show(index);
index++;
},T);

function show(a){
//做出判断，如果小于角标，那么移动，否则。清除方法
if(a<len){
var YRight=a*LR;//要滑动的距离
var zIndex=len-a;//动态添加z-index,保证新的图层不再原来的上面浮动
$(".content span").eq(a).css({"z-index":zIndex});
$(".content span").eq(a).animate({right:(YRight+"%")},T2);
}else{clearInterval(ziDong);}
}
});

资源免费下载：http://download.csdn.net/detail/u014703834/8092723