[javascript] 封装一个实用的焦点图切换效果
之前写过一篇博客，实用的焦点图切换效果，结构行为相分离 解释的比较详细，脚本是分离式的，但在易用性和重用性方面并不理想，所以在原来的基础上改了下，封装起来，并做了进一步的优化，这样同一个页面就可以使用多个这样的效果了，xhtm和css没有变化，感兴趣的朋友可以在js上面可以跟之前的代码做个对比，这样更容易理解和掌握。
有什么问题和建议请回帖 ＠＆＠
1.xhtml
<
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,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
;i
<
Num.length;i
++
) Num[i].className
=
(value
==
i)
?
"
on
"
:
""
;}
//
设置字母列表的样式切换；
function plays(value){
if
(document.all) $(focbox).filters[
0
].Apply();
//
滤镜
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){
//
设置鼠标经过和离开后的事件；
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(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后调用函数，并传入对象参数：
<script type="text/javascript">FocusImg("jfocuspic","a","jfocusnum","li",3000);</script>
源代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>实用的焦点图切换效果，分离式封装js脚本</title>
<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;}
#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;}
/*#jfocuspic{FILTER: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,motion=forward);水平方向渐变*/
</style>
<script language="JavaScript" type="text/javascript">
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;i<Num.length;i++) Num[i].className=(value==i)?"on":"";}
function plays(value){
if(document.all) $(focbox).filters[0].Apply();
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){
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(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();
}
</script>
</head>
<body>
<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>
<script type="text/javascript">FocusImg("jfocuspic","a","jfocusnum","li",3000);</script>
</body>
</html>
与 实用的焦点图切换效果，结构行为相分离 对比一下