自己写的jquery幻灯片、有兴趣的进来看一下、顺便有点问题求大牛指点

黑白丶Love 2013-04-07 09:12:18

如题、自己写勒一个jquery的幻灯片、
播放的时候都没问题但是有个问题是层级的显示
就是z-index的设定、



<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<style type="text/css">

body {

	padding: 0;

	margin: 0;

	background: #aaa;

}

a {

	text-decoration: none;

}

img {

	border: none;

}

/* 父级元素的样式 */

#wrap{

	width: 960px;

	height: 400px;

	margin: 100px auto;

	position: relative;

}





</style>

<script type="text/javascript" src="Jquery.js"></script>

<script type="text/javascript">

//页面加载

$(function(){





	mySlide('#wrap',['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg']);







});



var newInner = [];

/**

* 轮播主函数

* @param  wrap  [Str] 外层元素

* @param  arr 	[Arr] 一组图片

*/

function mySlide(wrap,arr)

{

	var wrap = $(wrap);

	// 遍历数组、分别创建数组里的每一个元素

	for (var i = 0; i < arr.length; i++) {

		wrap.append($("<img src="+arr[i]+" class='inner'>"));

	}

	// 获得子元素的集合

	var inner = $('.inner');

	for (var i = 0; i < inner.length; i++) {

		newInner.push(inner[i]);

	}

	// 设置定位

	setPos(wrap,inner);

	// 设置按钮

	setBut(wrap);

	inner.bind('click',beClick);



}

//判断是否是第一次加载

var firstKey = true;

/**

* 设置子元素的定位

* @param  wrap	 [Obj] 外层

* @param  inner	 [Obj] 子元素的集合

*/

function setPos(wrap,inner,index)

{

	var index = index || 0;

	// 获得外层的宽高

	var wrapW = wrap.width();

	var wrapH = wrap.height();

	if(firstKey)

	{

		firstKey = false;//关闭开关

		for (var i = 0; i < inner.length; i++) {

			$(inner[i]).css

			({

				'width':0,

				'height':0,

				'position': 'absolute',

				'left':wrapW/2+'px',

				'top':wrapH*3/4+'px',

				'border':'1px solid #ccc'

			});

		};

	}

		// 设置一下显示的先后顺序

		$(inner[0]).css('z-index','1');

		$(inner[1]).css('z-index','11');

		$(inner[2]).css('z-index','111');

		$(inner[3]).css('z-index','11');

		$(inner[4]).css('z-index','1');



	$(inner[0]).animate

	({

		'width':Math.floor(wrapW*40/100)+'px',

		'height':Math.floor(wrapH*45/100)+'px',

		'left':Math.floor(wrapW*-8/100)+'px',

		'top':Math.floor((wrapH*80/100)/2)+'px',

		'z-index':1

	},500);

	$(inner[1]).animate

	({

		'width':Math.floor(wrapW*60/100)+'px',

		'height':Math.floor(wrapH*65/100)+'px',

		'left':Math.floor(wrapW*0/100)+'px',

		'top':Math.floor((wrapH*50/100)/2)+'px',

		'z-index':11

	},500);

	$(inner[2]).animate

	({

		'width':Math.floor(wrapW*80/100)+'px',

		'height':Math.floor(wrapH*85/100)+'px',

		'left':Math.floor(wrapW*10/100)+'px',

		'top':Math.floor((wrapH*20/100)/2)+'px',

		'z-index':111

	},500);

	$(inner[3]).animate

	({

		'width':Math.floor(wrapW*60/100)+'px',

		'height':Math.floor(wrapH*65/100)+'px',

		'left':Math.floor(wrapW*40/100)+'px',

		'top':Math.floor((wrapH*50/100)/2)+'px',

		'z-index':11

	},500);

	$(inner[4]).animate

	({

		'width':Math.floor(wrapW*40/100)+'px',

		'height':Math.floor(wrapH*45/100)+'px',

		'left':Math.floor(wrapW*108/100)-Math.floor(wrapW*40/100)+'px',

		'top':Math.floor((wrapH*80/100)/2)+'px',

		'z-index':1

	},500);

	setTimeout(function(){

		clickKey = true;

	},600);

}

/**

* 设置切换按钮

* @param wrap  [Obj] 外层元素

*/

function setBut(wrap)

{

	// 获得外层的宽高

	var wrapW = wrap.width();

	var wrapH = wrap.height();

	//创建并添加元素

	wrap.append($("<div class='toleft'>"));

	wrap.append($("<div class='toright'>"));

	$('.toleft').css

	({

		'width':46+'px',

		'height':62+'px',

		'background':'url(images/but.png) no-repeat 0 0',

		'cursor':'pointer',

		'position':'absolute',

		'top':Math.floor((wrapH*110/100)/2)+'px',

		'left':Math.floor(wrapW*-8/100)-60+'px',

	})

	$('.toright').css

	({

		'width':46+'px',

		'height':62+'px',

		'background':'url(images/but.png) no-repeat -46px 0',

		'cursor':'pointer',

		'position':'absolute',

		'top':Math.floor((wrapH*110/100)/2)+'px',

		'left':Math.floor(wrapW*103/100)+60+'px',

	})

}

// 判定是否连点

var clickKey = true;

/**

* 元素被点击

*/

function beClick()

{

	if (clickKey) 

	{

		clickKey = false;

		var index = $(this).index();

		var arr = [];

		var len = newInner.length;

		for(var i=0;i<len;i++)

		{

			arr.push(newInner[(index+i+Math.ceil(len/2))%len]);

		}

		var wrap = $('#wrap')

		setPos(wrap,arr,index);

	};

}

</script>

</head>

<body onselectstart="return false" ondragstart="return false" >

<!--外层-->

<div id="wrap">

</div>

</body>

</html>