j(document).ready(function(){
	//j('div img').css({'width':'300px','height':'200px'});
	//j('#xxx>div:eq(0)').attr({'style':'z-index:10'});
	//j('#xxx>div:gt(0)').attr({'style':'z-index:1'});
	j('#xxx>div').css({'position':'absolute'});
	j('#xxx>div:eq(0)').css({'z-index':'10'});
	j('#xxx>div:eq(1)').css({'z-index':'9','opacity':'0'});
	j('#xxx>div:eq(2)').css({'z-index':'8','opacity':'0'});
	j('#xxx>div:eq(3)').css({'z-index':'7','opacity':'0'});

	j('#xxx>div:eq(0)').data('z-index','10');
	j('#xxx>div:eq(1)').data('z-index','9');
	j('#xxx>div:eq(2)').data('z-index','8');
	j('#xxx>div:eq(3)').data('z-index','7');

	//j('#xxx>div:gt(0)').css({'z-index':'1'});
});

/*
//可用效果正常代码 (结构很差)
var changeImg=function(){
	//alert(j('#xxx>div[width*="100"]').html());
	//alert(j('#xxx>div[title*="c"]').html());
	j('#xxx>div:has(img)').each(function(index){
		//alert(j(this).css('z-index'));
		if(j(this).css('z-index')==10)
		{
			var jobj=j(this);
			jobj.next().fadeTo(0,1,function(){
				jobj.fadeTo(1000,0,function(){
					jobj.next().next().fadeTo(0,1,function(){
						jobj.next().fadeTo(1000,0,function(){
							jobj.next().next().next().fadeTo(0,1,function(){
								jobj.next().next().fadeTo(1000,0,function(){
									jobj.fadeTo(1000,1,function(){
										jobj.next().next().next().fadeTo(0,0,changeImg);
									});
								});
							});
						});
					});
				});
			});
			
				
			
		}
	});
}
*/

//扩展性最好的代码(适用性,结构,扩展性非常好,建议设置为插件)
//...
var flag=0;//表示当前是第几张图片,0为第一张
var active;//表示是否继续开始执行changeImg,切换图片方法
var pauseActive=true;//表示是否继续执行暂停后半部的函数
var temp;//类同flag,为中间将表示第几张图片的值赋给flag时用到


/*
 *以下部分为暂停函数部分
 */
//暂停函数

//参数obj为将函数分成暂停前与暂停后执行部分的该函数对象
//iMinSecond表示暂停多少毫秒
//...
var Pause=function(obj,iMinSecond){
	//alert("a");
	//alert(jQuery.isFunction(obj));
if (window.eventList==null)
{
	window.eventList=new Array();
}
	//alert("b");
var ind=-1;
//alert(window.eventList.length);

for (var i=0;i<window.eventList.length;i++)
	{
    if (window.eventList[i]==null) 
	{
     window.eventList[i]=obj;
     ind=i;
     break;
    }
}

if (ind==-1)
{
    ind=window.eventList.length;
    window.eventList[ind]=obj;
	//alert(obj);
}

//此处给activePause赋true,
//表示赋初值,让GoOn中的执行后半部函数的判断条件通过
//...
activePause=true;

setTimeout("GoOn(" + ind + ")",iMinSecond);
//alert("c");
}
/*
该函数把要暂停的函数放到数组window.eventList里，同时通过setTimeout来调用继续函数。

继续函数如下：
*/

var GoOn=function(ind){
var obj=window.eventList[ind];
window.eventList[ind]=null;
	
	//需要activePause为真时才会执行后半部函数
	//即是说当鼠标移到1,2,3,4的序号框层上时,
	//activePause会置成false,
	//直接使后半部函数不执行,
	//而重新开始执行新的changeImg函数
	//...
	if (obj.NextStep && activePause) 
	{
		obj.NextStep();
	}	
	else
	{
		//obj();
	}
}

/*
 *调用方法
 *var myTest=new Test();
 *执行函数暂停后的部分的方法
 *myTest.NextStep();
 */

/*
 *以上部分为暂停函数部分
 */

var objFunction;

//切换图片的方法
var changeImg=function(){
		
		//表示function changeImg对象的变量
		objFunction=this;

		//遍历所有包含img标签的div
		j('#xxx>div:has(img)').each(function(index){
		//如果上述集合中的遍历元素的z-index值为10-flag时
		//...
			
			
		if(j(this).css('z-index')==(10-flag))
		{
			
			
			var jobj=j(this);
			
			//调用暂停函数
			Pause(objFunction,4000);
			//objFunction.NextStep表示
			//定义函数changeImg的后半部分函数的对象,
			//即是下面一行function(){}括号中的所有内容.
			objFunction.NextStep=function(){ 
				var jnextObj;//表示获取非最后一个图片序号1,2,3,4...的序号层对象
				var jfirstObj;//表示获取最后一个图片序号1,2,3,4...的序号层对象
				//...
				j('#select_img>div').each(function(){
					
					var jnumObj=j(this);
					//alert(jnumObj.css('background-color'));
					                                                    //注意:这里css背景属性的值必须小写,如:green,大写不认
																		//...
					//如果图片序号层对象满足条件:
					//1)不是图片序号层排位最末的元素
					//2)图片序号层对象的背景属性为绿.
					//...
					if((!jnumObj.is('#select_img>div:last-child')) && (jnumObj.css('backgroundColor')=='green') || (!jnumObj.is('#select_img>div:last-child')) && (jnumObj.css('backgroundColor')=='Green'))
					{
						jnextObj=jnumObj;//将该图片序号层对象赋给临时变量
					}
					//如果图片序号层对象满足条件:
					//1)是图片序号层排位最末的元素
					//2)图片序号层对象的背景属性为绿.
					//...
					else if((jnumObj.is('#select_img>div:last-child')) && (jnumObj.css('backgroundColor')=='green') || (jnumObj.is('#select_img>div:last-child')) && (jnumObj.css('backgroundColor')=='Green'))
					{
						jfirstObj=jnumObj;//将该图片序号层对象赋给临时变量
					}
				});
				
				
				//如果此元素不是最后一张图片的层时
				//...
				if(!jobj.is('#xxx>div:last-child'))
				{
					jnextObj.css({'background-color':'White'});//当前图片序号层背景恢复成白色
					jnextObj.next().css({'background-color':'Green'});//当前图片序号层同类的后一个元素的背景置成绿色

					//将此元素的后面的一张图片的层元素,透明度变成无
					//...
					jobj.next().fadeTo(1000,1);
					//将此元素的透明度变成透明
					//...
					jobj.fadeTo(1000,0,function(){
						//将changeImg函数看成一个对象,
						//然后对象就可以分成二部分执行.
						var myTest=new changeImg(); 
					});

					//flag+1 表示切换到下一张
					flag++;
				}
				//如果此元素是最后一张图片的层时
				//...
				else
				{
					jfirstObj.css({'background-color':'White'});//当前图片序号层背景恢复成白色
					j('#select_img>div:first-child').css({'background-color':'Green'});//同类图片序号层中的排位第一的元素的背景置成绿色

					//将遍历元素的第一张图片的层元素,透明度变成无
					//...
					j('#xxx>div:has(img):eq(0)').fadeTo(1000,1);
					//将此元素的透明度变成透明
					//...
					jobj.fadeTo(1000,0,function(){
						//将changeImg函数看成一个对象,
						//然后对象就可以分成二部分执行.
						var myTest=new changeImg(); 
					});
					
					//flag=0表示第一张,所有这里flag-1,最后会执行flag+1,flag值就等于0了
					//表示切换到第一张图片的层.
					//...
					flag=-1;

					//flag+1 表示切换到下一张
					flag++;	
				}
										   
												}//该括号对应NextStep的后半部函数的结束括号
												 //...
			
		}

	});
	
}

//中止当前动画播放的方法
//...
j(document).ready(function(){
	j('#btn_stop').click(function(){
		j('#xxx>div:has(img)').stop();
		//表示鼠标移到1,2,3,4...图片序号图层上时,
		//将activePause置为假,
		//使当前的使用setTimeout等待执行的后半部函数停止执行.
		//...
		activePause=false;
	});
});

//满足条件后,获取从第几张图片层开始,继续执行changeImg(),继续切换图片
//...
var init=function(){
	//表示鼠标最后停留过的那张图片的层
	//如果这个图片的层透明度变成无了
	//则active为true,反之为false
	//...
	if(j('#xxx>div:has(img):eq('+temp+')').css('opacity')!=1)
		{
			active=false;
		}
		else
		{
			active=true;
		}
		
		//当满足条件时
		if(active)
		{
			
			//将从第几张图片开始继续执行changeImg(),切换图片方法的值
			//temp,赋给flag
			//...
			flag=temp;
			//然后根据flag值,从对应的第X张图开始继续向后切换图片
			//...
			var myTest=new changeImg(); 
		}
}

var firstTimer;//全局的setTimeout变量,便于clearTimeout这个时间函数变量

j(document).ready(function(){
	//为所有包含img标签的层添加hover事件
	//...
	j('#select_img>div').hover(function(){
		//由于firstTimer设置了全局变量,所以这里可以直接调用clearTimeout
		//...
		clearTimeout(firstTimer);
		//temp表示当前鼠标停留的那个层是第几张图片的层
		//...
		temp=j.trim(j(this).text())-1;

		//停止播放动画效果
		j('#xxx>div:has(img)').stop();
		//将非当前鼠标停留的那个层的其他包含图片的层透明度变透明
		//..
		j('#xxx>div:has(img):not(:eq('+temp+'))').fadeTo(1000,0);
		//将当前鼠标停留的那个图片层的透明度变无
		j('#xxx>div:has(img):eq('+temp+')').fadeTo(1000,1);
		
	},function(){
		
		//当鼠标移出时,隔3秒后执行init()方法
		//init方法是根据条件,获得从第几张图片层开始,
		//继续执行changeImg()切换图片的方法.
		firstTimer=setTimeout("init()",3000);
	});
});


//给图片序号框附加hover事件
//...
j(document).ready(function(){
	j('#select_img > div').hover(function(){
		var jobj=j(this);
		j('#select_img>div').each(function(){
			j(this).css({'background-color':'White'});
		});
		jobj.css({'background-color':'Green'});
		//表示鼠标移到1,2,3,4...图片序号图层上时,
		//将activePause置为假,
		//使当前的使用setTimeout等待执行的后半部函数停止执行.
		//...
		activePause=false;
		
	},function(){
		//j(this).css({'background-color':'White'});
	});
});

//页面加载时执行切换图片方法
//...
j(document).ready(function(){

	j('#select_img>div:first-child').css({'background-color':'Green'});
	//将changeImg函数看成一个对象,
	//然后对象就可以分成二部分执行.
	//...
	var myTest=new changeImg();
});