JavaScript焦点图切换实现：结构、行为与样式分离

焦点图切换原理概述

焦点图切换效果在前端开发中十分常见，实现方式多样。工作中常用的一种实现方案如下所述。

如何确保当前数字导航与图片显示保持同步？

界面主要包含两个区域：图片切换区和数字导航区。这两个区域分别由两个循环函数驱动，分别是plays(value)和setBg(value)。

当图片切换到第2张时，数字导航的状态也应同步切换至第2个位置，从而实现视觉上的同步。关键在于向两个函数传递相同的参数value，这一协调任务由函数Mea(value)负责。

图片需要实现自动切换，即循环显示至最后一张后回到第一张，这由函数auto()完成。但auto()仅负责参数n的递增判断，若无外部动力支持，它无法独立运行。

此时，函数setAuto()结合setInterval()介入，作为整个系统的引擎装置。它每隔一定时间执行一次auto()，促使参数n不断递增，并将新值传递给函数Mea(n)。

在交互方面，当鼠标滑过图片区或导航区时，切换和导航应停留在当前状态。这由函数mouse(n)实现，正是它完成了这一交互逻辑。

通过上述几个函数的分工合作，各司其职，出色地完成了焦点图切换任务。

HTML结构实现

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>

CSS样式定义

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;}

JavaScript逻辑代码

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> <div class="jfocus"> <div id="jfocuspic">图片一 图片二 图片三 图片四 </div> <ul id="jfocusnum"> <li class="on">1</li> <li>2</li> <li>3</li> <li>4</li> </ul>  

代码分离与优化思考

行为层由JS实现，此处仅搭建了简单骨架。若需效果图美观且符合设计要求，需充分发挥CSS的作用。

JS代码编好后可重复利用，但CSS编写往往因设计师风格不同而需重新编写。要实现CSS精确定位并保持良好兼容性且最大化优化，并非易事。