JavaScript +css practical Focus-Graph switching effect

CSS Code

<style>

. Jfocus{width:300px;height:300px;border: #ccc 1px solid;background-color: #fff;} #jfocuspic {filter:progid:dximagetransform.microsoft.fade (duration=0.5,overlap=1.0); Width:300px;height:200px;o Verflow:hidden;} #jfocuspic a{display:none; font-size:2em; text-align:center; line-height:200px; font-weight:bold; background-color:# CCC height:200px; Cursor:pointer;} #jfocusnum li{cursor:pointer;height:50px; width:50px; line-height:50px;display:inline-block; color: #000; border:# 999 1px solid; Text-align:center; Background-color: #ccc; Float:left; margin:0 5px;} #jfocusnum li.on{color: #f00; font-weight:bold; border: #900 1px solid; font-size:14px;
</style>

Web page Special effects code

<script>

function $ (id,tag) {var re= (id&&typeof id!= "string")? Id:document.getelementbyid (ID); if (!tag) {return re;} Else{return re.getelementsbytagname (tag);} Get Element Object
function Focusimg (focbox,picobj,numbox,numobj,time) {
var n=0;
var imglist=$ (focbox,picobj);
var num=$ (numbox,numobj);
function SETBG (value) {for (Var i=0;i<num.length;i++) num[i].classname= (value==i)? On ': ';} Sets the style switch for alphabetical lists;
function plays (value) {
if (document.all) $ (focbox). filters[0].apply ();//Filter
for (i=0;i<num.length;i++) {i==value?imglist[i].style.display= ' block ': imglist[i].style.display= ' none ';}
if (document.all) $ (focbox). Filters[0].play ();
}
function mouse (n) {//Set mouse past and left events;
for (Var i=0;i<num.length;i++) {
(function (n) {
Num[i].onmouseo Tutorial Ver=imglist[i].onmouseover=function () {clearinterval (autostart); MEA (n);}
Num[i].onmouseout=imglist[i].onmouseout=function () {Setauto ();}
}) (i);
}
}
function mea (value) {n=value;mouse (n); setbg (value);p lays (value);}
function Auto () {n++;if (n>num.length-1) n=0; mea (n);}
function Setauto () {Autostart=setinterval (function () {auto ();},time)}
Setauto ();
}
</script>

HTML code

<div class= "Jfocus"
<div id= "Jfocuspic"
<a href= "#" style= "Display:block;" > Picture one </a>
<a href= "#" > Picture two </a>
<a href= "#" > Picture three </a>
<a href= "#" > Picture Four </a>
</div>
<ul id= "Jfocusnum"
<li class= "on" >1</LI>
<li>2</ Li>
<li>3</li>
<li>4</li>
</ul>
</div>