软件开发培训班 >> 编程开发 >> JavaScript

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

　　本文标签：焦点图,切换

<!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=gb2312" /> 
<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;} 
</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"> 
图片一 
图片二 
图片三 
图片四 
</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>

技术文章快速查找

js和jquery使按钮失效为不可用状态的方法

JavaScript中的apply()方法和call()方法使用介绍

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建