[javascript] 封装一个实用的焦点图切换效果【转】
来源:互联网 发布:勾选不了笔记本优化版 编辑:程序博客网 时间:2024/05/20 07:14
之前写过一篇博客,实用的焦点图切换效果,结构行为相分离 解释的比较详细,脚本是分离式的,但在易用性和重用性方面并不理想,所以在原来的基础上改了下,封装起来,并做了进一步的优化,这样同一个页面就可以使用多个这样的效果了,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>
与 实用的焦点图切换效果,结构行为相分离 对比一下
- [javascript] 封装一个实用的焦点图切换效果【转】
- 实用的js 焦点图切换效果 结构行为相分离
- 转一个比较实用的TAB切换 JAVASCRIPT+CSS
- 【实用随记】纯css的焦点图效果
- 新浪的一个焦点图效果
- jquery的网站幻灯片切换效果焦点图
- 一个javascript的左右滚动切换效果!javascript
- javascript实例:焦点图效果
- 回车键的tab效果 切换输入焦点
- JavaScript动感图片标题的焦点图切换
- javascript 焦点切换及history的使用
- 兼容浏览器好的JS焦点图效果,适合各种图片切换效果
- javascript焦点图(可以自动切换 )
- JavaScript回车切换焦点
- 【福利】一个简单实用的JQ轮播效果封装函数
- javascript的图片切换效果
- javascript实现焦点滚动图效果
- JavaScript图片切换效果[转]
- css之FILTER:progid:DXImageTransform.Microsoft.Gradient使用
- display:inline-block的深入理解
- Firefox常用插件
- 实用的js 焦点图切换效果 结构行为相分离
- 图解JavaScript中的一些定位属性
- [javascript] 封装一个实用的焦点图切换效果【转】
- 分页功能
- TMF、NGOSS介绍
- 用电脑最忌讳的18个小动作
- 你不是菜鸟(5):对于程序员学历是不是问题?
- GDB的使用方法
- 5,6、位运算
- OPC
- 如何使用OPC 数据访问规范 (DA)