[javascript] 封装一个实用的焦点图切换效果【转】
2010-07-22 09:35
579 查看
之前写过一篇博客,实用的焦点图切换效果,结构行为相分离 解释的比较详细,脚本是分离式的,但在易用性和重用性方面并不理想,所以在原来的基础上改了下,封装起来,并做了进一步的优化,这样同一个页面就可以使用多个这样的效果了,xhtm和css没有变化,感兴趣的朋友可以在js上面可以跟之前的代码做个对比,这样更容易理解和掌握。
有什么问题和建议请回帖 @&@
1.xhtml
2.css
3.js
在xhtml后调用函数,并传入对象参数:
<script type="text/javascript">FocusImg("jfocuspic","a","jfocusnum","li",3000);</script>
源代码:
view source
print?
与 实用的焦点图切换效果,结构行为相分离 对比一下
有什么问题和建议请回帖 @&@
1.xhtml
<divclass="jfocus"> <divid="jfocuspic"> <a href="#" style="display:block;">图片一</a> <a href="#">图片二</a> <a href="#">图片三</a> <a href="#">图片四</a> </div> <ul id="jfocusnum"> <liclass="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>
源代码:
view source
print?
<!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" > |
<divid= "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> |
相关文章推荐
- javascript 封装的一个实用的焦点图切换效果
- javascript 封装的一个实用的焦点图切换效果
- [javascript] 封装一个实用的焦点图切换效果
- 实用的js 焦点图切换效果 结构行为相分离
- 【福利】一个简单实用的JQ轮播效果封装函数
- JavaScript 封装一个tab效果源码分享
- 实用的js 焦点图切换效果 结构行为相分离
- JavaScript 封装一个tab效果源码分享
- 实用的js 焦点图切换效果 结构行为相分离
- 用IOS做一个界面切换的效果(登录界面和注册界面和找回密码界面的切换)(用封装好的lable和textf创建界面)
- 一个javascript的左右滚动切换效果!javascript
- javascript自动切换焦点控制效果完整实例
- 一个焦点图切换效果的制作
- javascript原生封装一个淡入淡出效果的函数测试实例代码
- javascript自动切换焦点控制效果完整实例
- 一个javascript的左右滚动切换效果!
- jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
- 使用javascript实现某网站的头部广告向上切换效果
- javascript实现3D切换焦点图
- javascript采用数组实现tab菜单切换效果