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