$(function(){ //首先找到需要点击的img $("li img").click(function(){ //判断一下当前img是否已经被点中 if(this.className.indexOf("active") !=-1) { return; } //获取数据 var i=$(this).attr("pic"); //获取要显示的文本内容,并以|把text分割成数组 var t=$(this).attr("text").split("|"); //改变文本的淡出,通过控制透明度来改变动画的效果 $("#frontText").fadeOut(); $("#frontTextBack").fadeOut(); $("#frontTextSub").fadeOut(); //处理当前active的img恢复原样 $("li img.active").animate({top:5,width:52,left:10},300) .removeClass("active") .fadeTo(200,0.6) //处理当前的active的img $(this).animate({top:-5,width:40,height:70,left:1},300) .addClass("active") .fadeTo(200,1) //处理显示的div的大图 $("#back").children().addClass("gray").end() .fadeIn(500,0.1,function(){ $(this).children("img").attr("src","imgaes/"+i+".jpg").removeClass("gray"); $(this).fadeTo(500,1,function(){ $("#frontText").html(t[0]).fadeIn(200); //更改正文文字 $("#frontTextBack").html(t[0]).fadeIn(200); //阴影文字 $("#frontTextSub").html(t[1]).fadeIn(200)} //副标题 ); }); }); }); //初始化第一张图 var i =0; show(); function show(){ if (i==$("li img").size()) i = 0 $("li img").eq(i).click(); i++; //setTimeout(show(),1000); }