实用的js 焦点图切换效果 结构行为相分离

焦点图切换效果，对前端来说，恐怕再熟悉不过了，实现它的方法应该有多种，工作当中常用的一种，叙述如下：
如何让当前的数字导航与图片的显示同步？
这里有两个区域，图片切换区和数字导航区；分别对应着两个循环函数；plays(value)和setBg(value)；
当图片循环切换到第2张时，此时数字导航的当前状态也变换到第2的位置，以此达到一种同步的效果，这里的关键就是给他们传递相同的参数value；而这个任务就交给了函数Mea(value)；
图片应该是自动切换的，当循环显示到最后一种图片后，返回到第一张图，这是用函数auto()来完成；但auto()只是做出参数n递增循环的判断，没有动力支持，它也无能为力，
这时，函数setAuto()带着setInterval()来了，它就是整个系统的引擎装置,每隔一定时间，执行一次auto();对应着参数n也不断的递增变化；n又传递给了函数Mea(n)；
最后的交互行为，当鼠标滑过时，图片切换区和数字导航区停留在当前状态，别忘了函数mouse(n)，这正是它的功劳；
如此，几个函数兄弟，分工合作，各司其职，出色的完成了这项工作；
1.html
代码如下:

<div class="jfocus"> 
<div id="jfocuspic"> 
<a href="#" style="display:block;">图片一</a> 
<a href="#">图片二</a> 
<a href="#">图片三</a> 
<a href="#">图片四</a> 
</div> 
<ul id="jfocusnum"> 
<li class="on">1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
</ul> 
</div> 
 
2.css 
 代码如下:

.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;overflow: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;} 
 
3.js 
 代码如下:

function $(id){return document.getElementById(id);} 
var n=0; 
var Num=$("jfocusnum").getElementsByTagName("li"); 
var imglist=$("jfocuspic").getElementsByTagName("a"); 
function setBg(value){//数字区域切换，给当前元素添加class类“on”，清除其他元素的类； 
for(var i=0;i<Num.length;i++) Num[i].className=(value==i)?"on":""; 
} 
function plays(value){//图片区域变换 
try//try...catch 可以测试代码中的错误。try 部分包含需要运行的代码，而 catch 部分包含错误发生时运行的代码。 
{ 
with (jfocuspic)//针对于IE添加滤镜效果； 
{ 
filters[0].Apply();//在开始一个动态效果之前，先需要进行装备（Apply），Apply事件用来使一种滤镜效果生成。 
for(i=0;i<Num.length;i++)i==value?children[i].style.display="block":children[i].style.display="none"; 
filters[0].play();//play()方法用于播放动态效果。在这之前，已经在#jfocus_pic样式中为图片层添加了滤镜样式； 
} 
} 
catch(e) 
{ 
for(i=0;i<Num.length;i++) 
{ 
i==value?imglist[i].style.display="block":imglist[i].style.display="none";//使当前图片显示，隐藏其他图片； 
} 
} 
} 
function mouse(n){ 
for(var i=0;i<Num.length;i++){ 
(function(n){ 
Num[i].onmouseover=imglist[i].onmouseover=function(){clearInterval(autoStart);Mea(n);}//鼠标经过后停止自动切换，并给函数Mea()传递一个当前参数n 
Num[i].onmouseout=imglist[i].onmouseout=function(){setAuto();} 
})(i); 
} 
} 
function Mea(value){ 
n=value; 
mouse(); 
setBg(value); 
plays(value); 
} 
function auto(){//参数n的递增使图片自动轮换的关键； 
n++; 
if(n>Num.length-1)n=0; 
Mea(n); 
} 
function setAuto(){autoStart=setInterval("auto()", 2000)}//每隔2000毫秒，便执行一次auto()函数；每执行一次，参数n便递增1 
setAuto();//调用函数 
 
演示代码: 
 
<!--CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt--> 
<p> 
<meta content="text/html; charset=gb2312" /> 
</p> 
<style type="text/css"><!-- 
.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;overflow:hidden;margin-bottom:20px;} 
#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> 
 
图片一 图片二 图片三 图片四  
<ul id="jfocusnum"> 
<li class="on">1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
</ul> 
<script type="text/javascript" language="JavaScript">// <![CDATA[ 
function $(id){return document.getElementById(id);} 
var n=0; 
var Num=$("jfocusnum").getElementsByTagName("li"); 
var imglist=$("jfocuspic").getElementsByTagName("a"); 
function setBg(value){ 
for(var i=0;i<Num.length;i++) Num[i].className=(value==i)?"on":""; 
} 
function plays(value){ 
try 
{ 
with (jfocuspic) 
{ 
filters[0].Apply(); 
for(i=0;i<Num.length;i++)i==value?children[i].style.display="block":children[i].style.display="none"; 
filters[0].play(); 
} 
} 
catch(e) 
{ 
for(i=0;i<Num.length;i++) 
{ 
i==value?imglist[i].style.display="block":imglist[i].style.display="none";//使当前图片显示，隐藏其他图片； 
} 
} 
} 
function mouse(n){ 
for(var i=0;i<Num.length;i++){ 
(function(n){ 
Num[i].onmouseover=imglist[i].onmouseover=function(){clearInterval(autoStart);Mea(n);} 
Num[i].onmouseout=imglist[i].onmouseout=function(){setAuto();} 
})(i); 
} 
} 
function Mea(value){ 
n=value; 
mouse(); 
setBg(value); 
plays(value); 
} 
function auto(){ 
n++; 
if(n>Num.length-1)n=0; 
Mea(n); 
} 
function setAuto(){autoStart=setInterval("auto()", 2000)} 
setAuto(); 
// ]]></script> 

  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 
行为层是由js来实现的，这里的工作只是搭建了一个简单的骨架，如果要让效果图美观些并符合设计要求，就要发挥css的强大作用了。 
js编好后，下次可以重复利用，但编写css就没那么幸运，每次设计师都可能会做出不同风格的外观，使你不得不重新编写css代码，而要实现css的精确定位并保持良好兼容性，还要使其得到最大的优化，真的不是一件简单的事情。