javascript 封装的一个实用的焦点图切换效果_javascript技巧

所以在原来的基础上改了下，封装起来，并做了进一步的优化，这样同一个页面就可以使用多个这样的效果了，xhtm和css没有变化，感兴趣的朋友可以在js上面可以跟之前的代码做个对比，这样更容易理解和掌握。
有什么问题和建议请回帖 ＠＆＠
1.xhtml

复制代码 代码如下:

   

        图片一
        图片二
        图片三
        图片四
   

   

       
• 1

       
• 2

       
• 3

       
• 4

   

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,tag){var re=(id&&typeof id!="string")?id:document.getElementById(id);if(!tag){return re;}else{return re.getElementsByTagName(tag);}}//获取元素对象
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;ifunction plays(value){
if(document.all) $(focbox).filters[0].Apply();//滤镜
for(i=0;iif(document.all) $(focbox).filters[0].play();
}
function mouse(n){//设置鼠标经过和离开后的事件；
    for(var i=0;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(n);setBg(value);plays(value);}
function auto(){n++;if(n>Num.length-1)n=0;    Mea(n);}
function setAuto(){autoStart=setInterval(function(){auto();},time)}
setAuto();
}

在xhtml后调用函数，并传入对象参数：

完整的演示代码:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>灏</title>