代碼如下:

<div align=center>

<div id=nav>

<ul>

<li><img src=images/02.jpg text=美景如畫的海景|天藍海藍|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;//默認開始播放第幾個，最大4 ，因為有5各個最大是4

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

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}); //將顯示的內容退去完畢

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>