提示：您可以先修改部分代碼再運行
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"><HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>javascript css 圖片切換代碼</tITLE><META http-equiv=Content-Type content="text/html; charset=gb2312"><style type="text/css">/* CSS Document */body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}ul,ol,li{list-style:none;}input,button{margin:0;font-size:12px;vertical-align:middle;}body{font-size:12px;font-family:Arial, Helvetica, sans-serif; text-align:center; margin:0 auto; }table{border-collapse:collapse;border-spacing:0;}.clearfloat{height:0;font-size:1px;clear:both;line-height:0;}a{color:#333;text-decoration:none;}a:hover{color:#ef9b11; text-decoration:underline;}.dis {DISPLAY: block}.undis {DISPLAY: none}#Fpic img{height:341;width:292;}#Focus { padding: 2px; margin:20px auto; WIDTH: 294px;HEIGHT: 442px; text-align:left;}#FocusPic {BORDER-RIGHT: #99d2e2 1px solid; BORDER-TOP: #99d2e2 1px solid; BORDER-LEFT: #99d2e2 1px solid; WIDTH: 292px; BORDER-BOTTOM: #99d2e2 1px solid; HEIGHT: 440px}#Fpic {CLEAR: both; FILTER: progid:DXImageTransform.Microsoft.GradientWipe(duration=2,gradientSize=1,wipestyle=1,motion=forward); WIDTH: 292px; HEIGHT: 341px}#Ftxt {CLEAR: both; BACKGROUND: #3c3c3c; WIDTH: 292px; PADDING-TOP: 6px; HEIGHT: 93px}#Ftxt UL {CLEAR: both; PADDING-LEFT: 17px; WIDTH: 263px; COLOR: #fff; LINE-HEIGHT: 16px; HEIGHT: 67px}#Ftxt UL A {COLOR: #fff}#Ftxt UL A:hover {COLOR: #fff}#Ftxt UL A:visited {COLOR: #fff}#Ftxt UL H1 {FONT-SIZE: 18px; COLOR: #ffffd8; LINE-HEIGHT: 28px; TEXT-ALIGN: left}#Ftxt UL H1 A {COLOR: #ffffd8}#Ftxt UL H1 A:hover {COLOR: #ffffd8}#Ftxt UL H1 A:visited {COLOR: #ffffd8}#Ftxt .ft {PADDING-LEFT: 17px; WIDTH: 275px}#Ftxt .ft .more {FLOAT: left; WIDTH: 188px}#Ftxt #Fnums {FLOAT: left; WIDTH: 87px}#Ftxt #Fnums DIV {FONT-WEIGHT: bold; BACKGROUND: #4f4f4f; FLOAT: left; WIDTH: 18px; CURSOR: pointer; COLOR: #c5c5c5; LINE-HEIGHT: 19px; MARGIN-RIGHT: 3px; HEIGHT: 19px; TEXT-ALIGN: center}#Ftxt #Fnums .on {BACKGROUND: #e67200; COLOR: #fff}</style><META content="MSHTML 6.00.6000.17080" name=GENERATOR></hEAD><BODY><div id=Focus><div id=FocusPic onmouseover=clearAuto() onmouseout=setAuto()><div id=Fpic><div class=dis></div><div class=undis></div><div class=undis></div><div class=undis></div></div><div id=Ftxt><div class=bd id=Ftxtlingks><ul class=dis> <LI> <H1>唐雯：拉斯維加斯爭美譽</h1> <LI>距離環球小姐總決賽還有最後一天了，我們"唐雯拉拉隊"也越來越緊張… [詳細] </lI></ul><ul class=undis> <LI> <H1>趙柯：做個模範環保達人</h1> <LI>不知道什麼時候開始，包包裡開始帶上了便攜筷子，屬於自己的水杯…… [詳細] </lI></ul><ul class=undis> <LI> <H1>清純MM想跟誰去旅行</h1> <LI>不用在乎目的地，不用在乎沿途的風景，只要我們能夠在一起……[詳細] </lI> </ul><ul class=undis> <LI> <H1>飄在南京的佤族打工仔</h1> <LI>他們靠得就是按勞取酬，每月都能按時取到工資，他們也心滿意足了…… [詳細] </lI></ul></div><div class=ft><div class=more></div><div id=Fnums><div class=on onclick=Mea(0)>1</div><div onclick=Mea(1)>2</div><div onclick=Mea(2)>3</div><div onclick=Mea(3)>4</div></div></div></div></div></div><SCRIPT> var n=0;var showsTab = document.getElementById("Fnums");var m=showsTab.getElementsByTagName("div").length;function Mea(value){n=value;setBg(value);plays(value);cons(value);}function setBg(value){for(var i=0;i<m;i++) if(value==i){showsTab.getElementsByTagName("div")[i].className='on';} else{showsTab.getElementsByTagName("div")[i].className='';} } function plays(value){try{with (Fpic){filters[0].Apply();for(i=0;i<m;i++)i==value?children[i].className="dis":children[i].className="undis"; filters[0].play(); }}catch(e){var d = document.getElementById("Fpic").getElementsByTagName("div");for(i=0;i<m;i++)i==value?d[i].className="dis":d[i].className="undis"; }}function cons(value){try{with (Ftxtlingks){for(i=0;i<m;i++)i==value?children[i].className="dis":children[i].className="undis"; }}catch(e){var d = document.getElementById("Ftxtlingks").getElementsByTagName("ul");for(i=0;i<m;i++)i==value?d[i].className="dis":d[i].className="undis"; }}function clearAuto(){clearInterval(autoStart)}function setAuto(){autoStart=setInterval("auto(n)", 3000)}function auto(){n++;if(n>=m)n=0;Mea(n);} function sub(){n--;if(n<0)n=m-1;Mea(n);} setAuto(); function tab(o,o2,n,o1c,o2c){var m_n = document.getElementById(o).getElementsByTagName(o1c);var c_n = document.getElementById(o2).getElementsByTagName(o2c);for(i=0;i<m_n.length;i++){ m_n[i].className=i==n?"on":""; c_n[i].className=i==n?"dis":"undis"; }}</sCRIPT></bODY></hTML>
提示：您可以先修改部分代碼再運行
