Tip: you can modify some code before running
Javascript focus chart with small thumbnails switch javascript code only<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>Webpage special effects homepage image switching</title><style type="text/css">/* Reset style */* {margin: 0; padding: 0; word-break: break-all;} body {background: # fff; color: #000000; font: 12px/1.6em Helvetica, Arial, sans-serif; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;} h1, h2, h3, h4, h5, h6 {font-size: 1em;} a {color: # 0287CA; text-decoration: none;} a: hover {text-decoration: underline ;} ul, li {list-style: none;} fieldset, img {border: none;} legend {display: none;} em, strong, cite, th {font-style: normal; font-weight: normal;} input, textarea, select, button {font: 12px Helvetica, Arial, sans-serif;} table {border-collapse: collapse ;} html {overflow:-moz-scrollbars-vertical;}/* Always show Firefox scrollbar * // * iFocus style */# ifocus {width: Pixel px; height: 245px; margin: 0px; border: 1px solid # DEDEDE; background: # F8F8F8;} # ifocus_pic {display: inline; position: relative; float: left; width: 540px; height: 225px; overflow: hidden; margin: 10px 0 0 10px;} # ifocus_piclist {position: absolute;} # ifocus_piclist li {width: 550px; height: 225px; overflow: hidden ;} # ifocus_piclist img {width: 550px; height: 225px;} # ifocus_btn {display: inline; float: right; width: 91px; margin: 9px 9px 0 0 0 ;} # ifocus_btn li {width: 91px; height: 57px; cursor: pointer; opacity: 0.5;-moz-opacity: 0.5; filter: alpha (opacity = 50 );} # ifocus_btn img {width: 75px; height: 45px; margin: 7px 0 0 11px;} # ifocus_btn. current {background: url (img/ifocus_btn_bg.gif) no-repeat; opacity: 1;-moz-opacity: 1; filter: alpha (opacity = 100) ;}# ifocus_opdiv {position: absolute; left: 0; bottom: 0; width: 545px; height: 35px; background: #000; opacity: 0.5;-moz-opacity: 0.5; filter: alpha (opacity = 50) ;}# ifocus_tx {position: absolute; left: 8px; bottom: 8px; color: # FFF ;}# ifocus_tx. normal {display: none ;}</style><script type="text/javascript">Function $ (id) {return document. getElementById (id);} function addLoadEvent (func) {var oldonload = window. onload; if (typeof window. onload! = 'Function') {window. onload = func;} else {window. onload = function () {oldonload (); func () ;}} function moveElement (elementID, final_x, final_y, interval) {if (! Document. getElementById) return false; if (! Document. getElementById (elementID) return false; var elem = document. getElementById (elementID); if (elem. movement) {clearTimeout (elem. movement);} if (! Elem. style. left) {elem. style. left = "0px";} if (! Elem. style. top) {elem. style. top = "0px";} var xpos = parseInt (elem. style. left); var ypos = parseInt (elem. style. top); if (xpos = final_x & ypos = final_y) {return true;} if (xpos <final_x) {var dist = Math. ceil (final_x-xpos)/10); xpos = xpos + dist;} if (xpos> final_x) {var dist = Math. ceil (xpos-final_x)/10); xpos = xpos-dist;} if (ypos <final_y) {var dist = Math. ceil (final_y-ypos)/10); ypos = ypos + dist;} if (ypos> final_y) {var dist = Math. ceil (ypos-final_y)/10); ypos = ypos-dist;} elem. style. left = xpos + "px"; elem. style. top = ypos + "px"; var repeat = "moveElement ('" + elementID + "'," + final_x + "," + final_y + "," + interval + ") "; elem. movement = setTimeout (repeat, interval);} function classNormal (iFocusBtnID, iFocusTxID) {var iFocusBtns = $ (iFocusBtnID ). getElementsByTagName ('Lil'); var iFocusTxs =$ (iFocusTxID ). getElementsByTagName ('Lil'); for (var I = 0; I<iFocusBtns.length; i++) { iFocusBtns[i].className='normal'; iFocusTxs[i].className='normal'; }}function classCurrent(iFocusBtnID,iFocusTxID,n){ var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li'); var iFocusTxs = $(iFocusTxID).getElementsByTagName('li'); iFocusBtns[n].className='current'; iFocusTxs[n].className='current';}function iFocusChange() { if(!$('ifocus')) return false; $('ifocus').onmouseover = function(){atuokey = true}; $('ifocus').onmouseout = function(){atuokey = false}; var iFocusBtns = $('ifocus_btn').getElementsByTagName('li'); var listLength = iFocusBtns.length; iFocusBtns[0].onmouseover = function() { moveElement('ifocus_piclist',0,0,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',0); } if (listLength>= 2) {iFocusBtns [1]. onmouseover = function () {moveElement ('ifocus _ piclist', 0,-225,5); classNormal ('ifocus _ btn ', 'ifocus _ tx '); classCurrent ('ifocus _ btn ', 'ifocus _ tx', 1) ;}} if (listLength >=3) {iFocusBtns [2]. onmouseover = function () {moveElement ('ifocus _ piclist', 0,-rows, 5); classNormal ('ifocus _ btn ', 'ifocus _ tx '); classCurrent ('ifocus _ btn ', 'ifocus _ tx', 2) ;}} if (listLength >=4) {iFocusBtns [3]. onmouse Over = function () {moveElement ('ifocus _ piclist', 0,-675,5); classNormal ('ifocus _ btn ', 'ifocus _ tx '); classCurrent ('ifocus _ btn ', 'ifocus _ tx', 3) ;}} setInterval ('autoifocus () ', 3500); var atuokey = false; function autoiFocus () {if (! $ ('Ifocus') return false; if (atuokey) return false; var focusBtnList = $ ('ifocus _ btn '). getElementsByTagName ('Lil'); var listLength = focusBtnList. length; for (var I = 0; I<listLength; i++) { if (focusBtnList[i].className == 'current') var currentNum = i; } if (currentNum==0&&listLength!=1 ){ moveElement('ifocus_piclist',0,-225,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',1); } if (currentNum==1&&listLength!=2 ){ moveElement('ifocus_piclist',0,-450,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',2); } if (currentNum==2&&listLength!=3 ){ moveElement('ifocus_piclist',0,-675,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',3); } if (currentNum==3 ){ moveElement('ifocus_piclist',0,0,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',0); } if (currentNum==1&&listLength==2 ){ moveElement('ifocus_piclist',0,0,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',0); } if (currentNum==2&&listLength==3 ){ moveElement('ifocus_piclist',0,0,5); classNormal('ifocus_btn','ifocus_tx'); classCurrent('ifocus_btn','ifocus_tx',0); }}addLoadEvent(iFocusChange);</script></head><body><br /><div align="center"><div id="ifocus"> <div id="ifocus_pic"> <div id="ifocus_piclist" > <ul> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div id="ifocus_opdiv"></div> <div id="ifocus_tx"> <ul> <li class="current">Top web games in 2008</li> <li class="normal">Latest web games in 2009</li> <li class="normal">A business tycoon challenges billionaires</li> <li class="normal">An Imperial expedition that had to be played in 2009</li> </ul> </div> </div> <div id="ifocus_btn"> <ul> <li class="current"></li> <li class="normal"></li> <li class="normal"></li> <li class="normal"></li> </ul> </div></div></div>China WEB first stop</body></html>
Tip: you can modify some code before running
