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

 更新时间:2010年07月14日 23:49:25   作者:  
之前有一篇博客,实用的焦点图切换效果,结构行为相分离 解释的比较详细,脚本是分离式的,但在易用性和重用性方面并不理想,这里原作者进行了,优化。
所以在原来的基础上改了下,封装起来,并做了进一步的优化,这样同一个页面就可以使用多个这样的效果了,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>
完整的演示代码:

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

更多的的缩略图效果

相关文章

  • js深度合并两个数组对象的实现

    js深度合并两个数组对象的实现

    这篇文章主要介绍了js深度合并两个数组对象的实现方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • Javascript计算二维数组重复值示例代码

    Javascript计算二维数组重复值示例代码

    这篇文章主要给大家介绍了利用Javascript计算二维数组重复值的方法,文中给出了详细的示例代码,相信对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
    2016-12-12
  • javascript格式化日期时间方法汇总

    javascript格式化日期时间方法汇总

    本文给大家汇总介绍了javascript格式化日期时间的五种常用方法,个人对第五种个性化输出时间比较有兴趣,基本上只要项目中能用到都是使用第五种,推荐给小伙伴们。
    2015-06-06
  • 探究JavaScript函数式编程的乐趣

    探究JavaScript函数式编程的乐趣

    本文是函数式编程系列的第一篇文章,这里我会简要介绍一下编程范式,然后会直接介绍使用Javascript进行函数式编程的概念,需要的朋友可以参考下
    2015-12-12
  • JS表单验证的代码(常用)

    JS表单验证的代码(常用)

    最近没有项目做,有点空余时间,小编把日常比较常用的js表单验证代码整理分享到脚本之家平台,供大家学习,需要的朋友参考下吧
    2016-04-04
  • JavaScript实现的超简单计算器功能示例

    JavaScript实现的超简单计算器功能示例

    这篇文章主要介绍了JavaScript实现的超简单计算器功能,可实现基本的四则运算并带有验证功能,代码中备有较为详尽的注释便于理解,需要的朋友可以参考下
    2017-12-12
  • window.location.hash 属性使用说明

    window.location.hash 属性使用说明

    location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url。而location.hash则可以用来获取或设置页面的标签值。
    2010-03-03
  • JavaScript Date 知识浅析

    JavaScript Date 知识浅析

    这篇文章主要介绍了JavaScript Date 知识,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-01-01
  • JS轻松实现CSS设置,DIV+CSS常用CSS设置

    JS轻松实现CSS设置,DIV+CSS常用CSS设置

    JS轻松实现CSS设置,DIV+CSS常用CSS设置...
    2007-02-02
  • js中精确计算加法和减法示例

    js中精确计算加法和减法示例

    这篇文章主要介绍了js中如何精确计算加法和减法,需要的朋友可以参考下
    2014-03-03

最新评论