<HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <mce:script type="text/javascript" src="./jquery/jquery.js" mce_src="jquery/jquery.js"><!-- // --></mce:script> </HEAD> <BODY> <div id="a" > <img name="a" src="./img/pre-hover.gif" mce_src="img/pre-hover.gif" οnclick="frontImg('b','g','bounds0')"/> </div> <div id=bounds0> <div id="b"> <img name="b" src="./img/b.gif" mce_src="img/b.gif" /> BBBB </div> <div id="c"> <img name="c" src="./img/c.gif" mce_src="img/c.gif" /> CCCC </div> <div id="d"> <img name="d" id="d" src="./img/d.gif" mce_src="img/d.gif" /> DDDD </div> <div id="e" style= "display:none"> <img name="e" src="./img/e.gif" mce_src="img/e.gif" /> EEEE </div> <div id="f" style= "display:none"> <img name="f" src="./img/f.gif" mce_src="img/f.gif" /> FFFF </div> <div id="g" style= "display:none" > <img name="g" src="./img/g.gif " mce_src="img/g.gif " /> GGGG </div> </div > <div id="h" > <img name="h" src="./img/next-no.gif" mce_src="img/next-no.gif" οnclick="backImg('b','g','bounds0')"/> </div> </BODY> </HTML> <mce:script type="text/javascript"><!-- function frontImg(beginID,endID,imgDIV){ var ishidden=$("#"+endID).is(":hidden"); if(ishidden) { //找到第一个显示的将之隐藏 $.each($("#"+imgDIV+" div"),function(i,n){ if(!$(n).is(":hidden")) { $(n).hide(); return false; } } ); //找到最后一个显示的 后一个DOM节点将之显示 var lastShowDOM=''; $.each($("#"+imgDIV+" div"),function(i,n){ if(!$(n).is(":hidden")) { lastShowDOM=n; } } ); $(lastShowDOM).next().show(); } else { $("#a" +" img:first-child").attr('src','./img/pre-no.gif'); } $("#h" +" img:first-child").attr('src','./img/next-hover.gif'); } function backImg(beginID,endID,imgDIV){ var ishidden=$("#"+beginID).is(":hidden"); if(ishidden) { //找到第一个显示的 前一个DOM节点将之显示 $.each($("#"+imgDIV+" div"),function(i,n){ if(!$(n).is(":hidden")) { $(n).prev().show(); return false; } } ); //找到最后一个显示的将之隐藏 var lastShowDOM=''; $.each($("#"+imgDIV+" div"),function(i,n){ if(!$(n).is(":hidden")) { lastShowDOM =n; } } ); $(lastShowDOM).hide(); } else { $("#h" +" img:first-child").attr('src','./img/next-no.gif'); } $("#a" +" img:first-child").attr('src','./img/pre-hover.gif'); } // --></mce:script>