一个焦点图切换效果的制作

焦点图切换效果，对前端来说，恐怕再熟悉不过了，实现它的方法应该有多种，工作当中常用的一种，叙述如下：

效果演示

• 1
• 2
• 3
• 4

如何让当前的数字导航与图片的显示同步？

这里有两个区域，图片切换区和数字导航区；分别对应着两个循环函数；plays(value)和setBg(value)；

当图片循环切换到第2张时，此时数字导航的当前状态也变换到第2的位置，以此达到一种同步的效果，这里的关键就是给他们传递相同的参数value；而这个任务就交给了函数Mea(value)；

图片应该是自动切换的，当循环显示到最后一种图片后，返回到第一张图，这是用函数auto()来完成；但auto()只是做出参数n递增循环的判断，没有动力支持，它也无能为力。

这时，函数setAuto()带着setInterval()来了，它就是整个系统的引擎装置,每隔一定时间，执行一次auto();对应着参数n也不断的递增变化；n又传递给了函数Mea(n)；

最后的交互行为，当鼠标滑过时，图片切换区和数字导航区停留在当前状态，别忘了函数mouse(n)，这正是它的功劳；

如此，几个函数兄弟，分工合作，各司其职，出色的完成了这项工作；

HTML code

 
	

    	 
         
         
         
    
 
	
 
		
1
 
		
2
 
		
3
 
		
4
 
	
 

CSS Code

Javascript

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;iNum.length-1)n=0;
	Mea(n);
}
function setAuto(){autoStart=setInterval("auto()", 2000)}
 
setAuto();

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

本文地址：http://www.nowamagic.net/librarys/veda/detail/579，欢迎访问原出处。