Tip: you can modify some code before running
<!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 Image switching code</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;}: 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: Pixel px} # 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: 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>Tang Wen: Las Vegas</h1> <LI>It's the last day before Miss World Championship, and we're getting nervous about the "Tang wenla... [Details]</lI></ul><ul class=undis> <LI> <H1>Zhao Ke: a model environmental expert</h1> <LI>I don't know when to start. I started to bring portable chopsticks in my bag and my own water cup ...... [Details]</lI></ul><ul class=undis> <LI> <H1>Who does Qingchun MM want to travel?</h1> <LI>Don't care about the destination, don't care about the scenery along the way, as long as we can be together ...... [Details]</lI> </ul><ul class=undis> <LI> <H1>WA wage earners floating in Nanjing</h1> <LI>They rely on pay-as-you-go, and get their monthly salary on time. They are satisfied ...... [Details]</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 = S-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>
Tip: you can modify some code before running
