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>完整的演示代码: 封装实用的焦点图切换效果，分离式js脚本 .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;} 图片一图片二图片三图片四 1 2 3 4 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]更多的的缩略图效果

我的答案是，超过两个 else 的 if ，或者是超过两个 case 的 switch 。可是在代码中大量使用 if else 和 switch case 是很正常的事情吧？错！绝大多数分支超过两个的 if else 和 switch case 都不应该以硬编码（ h>>>详细阅读

本文标题：javascript 封装的一个实用的焦点图切换效果

地址：http://www.17bianji.com/kaifa2/JS/26018.html

1/2 1