代碼如下:

<div align="center">

<DIV id=nav>

<UL>

<LI><IMG src="images/02.jpg" text="美景如畫的海景|天藍(lán)海藍(lán)|2"></LI>

<LI><IMG src="images/01.jpg" text="Handy Code|春華秋實|1"></LI>

<LI><IMG src="images/03.jpg" text="郁郁蔥蔥的生命|生生不息的生命|3"></LI>

<LI><IMG src="images/04.jpg" text="孤獨的一棵老樹|等誰呢?|4"></LI>

<LI><IMG src="images/05.jpg" text="明媚的向日葵花|生生不息的生命|5"></LI>

</UL>

<DIV id=frontTextBack></DIV>

<DIV id=frontText></DIV>

<DIV id=frontTextSub></DIV>

<DIV id=BG></DIV>

<DIV id=mask></DIV>

<DIV id=back><IMG height=240 src="" width=760></DIV>

</DIV>

</div>

<SCRIPT type=text/javascript>

<!--

var num = 0;

var i=0;//默認(rèn)開始播放第幾個，最大4 ，因為有5各個最大是4

var type=2;//樣式分三種樣式 0為不播放，僅通過點擊播放，1為順序播放 2為隨機(jī)播放

var obj_Inter;

$("#nav").hide();

$("#nav>UL>li img").load(function(){num++;if(num==5)$("#nav").show();}).each(function(index){$(this).click(function(){

clearInterval(obj_Inter);

show(index);

if(type!=0){obj_Inter = setInterval(show_action,3000);i=index+1;}

});});

function show(index){

var obj = $("#nav>ul>li img:eq("+index+")");

if ($(obj).attr("open")==1) return;

$("#frontText,#frontTextBack,#frontTextSub").fadeOut();

$("#nav>UL >li img.active").fadeTo(200,0.6)

.removeClass("active")

.attr("open","0")

.animate({top:5,width:52,left:10},300)

.parent().css({"color":"#aaa"}); //將顯示的內(nèi)容退去完畢

var t = $(obj).attr("text").split("|");

$(obj).animate({top:-5,width:70,height:40,left:1},100)

.addClass("active")

.attr("open","1")

.fadeTo(200,1)

.parent().css({"color":"white"});

$("#back").children().addClass("gray").end().fadeTo(500,0.1,function(){

$(this).children("img").attr("src","images/"+t[2]+".jpg").removeClass("gray"); //更改圖片

$(this).fadeTo(500,1,function(){

$("#frontText,#frontTextBack").html(t[0]).fadeIn(200); //更改正文文字

$("#frontTextSub").html(t[1]).fadeIn(200);

});

})

}

function show_action(){

switch(type){

case 0:i=0;show(i);break;

case 1:if(i>=$("#nav>ul>li img").size())i=0;show(i);i++; break;

case 2:do{var temp = Math.round(Math.random()*4);}while(i==temp);show(temp);$("#num").html(temp);break;

}

}

function begin(){

switch(type){

case 0:i=0;show_action();break;

default:show_action();obj_Inter =setInterval(show_action,3000);

}

}

begin();

//-->

</SCRIPT>

更多信息請查看IT技術(shù)專欄