<!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" />
<base href="http://hi.baidu.com/koen_li">
<title>#myfocus</title>
<style type="text/css">
*{margin:0;padding:0;border:0;list-style:none;}
body{padding:20px;background:#fff;color:#333;font-size:12px;}
#myFocus{width:946px;height:337px;position:relative;overflow:hidden;font-family:Verdana, Arial, Helvetica, sans-serif;}/*焦点图大小，可按需要是否加边框*/
#myFocus .loading{position:absolute;z-index:9999;color:#fff;width:100%;height:100%;text-align:center;padding-top:90px;background:#666;}/*载入画面*/
#myFocus .pics ul{width:100%;height:306px;}/*图片高*/
#myFocus .pics ul li{position:absolute;width:100%;height:306px;}
#myFocus .pics ul li img{width:100%;height:100%;}
#myFocus .ts{width:944px;height:29px;border:1px solid #dedede;overflow:hidden;}/*文字宽高*/
#myFocus .ts ul{width:945px;height:29px;line-height:29px;}
#myFocus .ts ul li{float:left;width:186px;height:26px;border-right:1px solid #dedede;padding:1px;overflow:hidden;}
#myFocus .ts ul li a{display:block;padding-left:10px;width:178px;color:#333;text-decoration:none;background:#f1f1f1;}
#myFocus .ts ul li a.current{background:#aaa;color:#fff;font-weight:bold;}
</style>
<SCRIPT type=text/javascript>
/*design by koen @ 10nian5yue8ri*/
/*http://hi.baidu.com/koen_li*/
function setMyFocus(ID,t){//主函数...
function $(id) {return document.getElementById(id);}
function $$(tag,obj){return (typeof obj=='object'?obj:$(obj)).getElementsByTagName(tag);}
function opa(n){//图片淡入淡出函数
var pics = $$('img',pic);
var setfade=function(obj,o){
if (document.all) obj.style.filter = "alpha(opacity=" + o + ")";
else obj.style.opacity = (o / 100);
};
var getfade=function(obj){
return (document.all)?((obj.filters.alpha)?obj.filters.alpha.opacity:false):((obj.style.opacity)?obj.style.opacity*100:false);
}
var show=function(){
if(pics[n].move) clearTimeout(pics[n].move);
if (o1 >= 100) return true;
o1+=10;
setfade(pics[n],o1);
pics[n].move=setTimeout(show,5);
};
var hide=function(){
if(pics[N].move) clearTimeout(pics[N].move);
if (o2 <= 0) {pics[N].style.display='none';return true;}
o2-=10;
setfade(pics[N],o2);
pics[N].move=setTimeout(hide,5);
};
for(var i=0;i<pics.length;i++){
if(!getfade(pics[i])) {setfade(pics[i],0);pics[i].style.display='none';}
if(pics[i].name=='out') var N=i;
}
if(!N&&n==0) {//开始载入...
pics[n].name='out';
pics[n].style.display='';
var o1=getfade(pics[n]);
show();
return true;
}
if(N==n) return true;
pics[N].name=''
pics[n].name='out';
pics[n].style.display='';
var o1=getfade(pics[n]);
var o2=getfade(pics[N]);
hide();
show();
}
function classNormal() {//数字标签样式清除
var a = $$('a',tit);
for (var i = 0; i < a.length; i++) {
a[i].className = '';
}
}
function autoFocusChange() {//自动运行
if (atuokey) return;
var a = $$('a',tit);
for (var i = 0; i < a.length; i++) {
if (a[i].className == 'current') {
var currentNum = i;
}
}
if(currentNum<a.length-1){
opa(currentNum+1);
classNormal();
a[currentNum+1].className = 'current';
}else if(currentNum==a.length-1){
opa(0);
classNormal();
a[0].className = 'current';
}
}
function focusChange() {//交互切换
var a = $$('a',tit);
for (var i = 0; i < a.length; i++) {
a[i].I=i;
a[i].onmouseover = function(){
opa(this.I);
classNormal();
a[this.I].className = 'current';
}
}
}
function init(){//初始化
$(ID).removeChild($$('div',ID)[0]);
opa(0);
$$('a',tit)[0].className = 'current';
$(ID).onmouseover = function() {
atuokey = true;
clearInterval(auto);
}
$(ID).onmouseout = function() {
atuokey = false;
auto=setInterval(autoFocusChange, T);
}
}
var pic=$$('div',ID)[1];
var tit=$$('div',ID)[2];
var atuokey = '';
var auto='';
var T=t*1000;//每帧图片停留的时间，1000=1秒
init();
focusChange();
auto=setInterval(autoFocusChange, T);
}
window.onload=function(){
setMyFocus('myFocus',3)
}
</SCRIPT>
</head>
<body>
<div id="myFocus">
<div class="loading">请稍候...<br /><br /><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051020541820883.gif" /></div>
<div class="pics">
<ul>
<li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018042735524.jpg" alt="1" /></a></li>
<li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018044355191.jpg" alt="2" /></a></li>
<li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018050315609.jpg" alt="3" /></a></li>
<li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018055365260.jpg" alt="4" /></a></li>
<li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018061333534.jpg" alt="5" /></a></li>
</ul>
</div>
<div class='ts'>
<ul>
<li><a href="http://hi.baidu.com/koen_li#">1、来源于网络，版权属于作者</a></li>
<li><a href="http://hi.baidu.com/koen_li#">2、来源于网络，版权属于作者</a></li>
<li><a href="http://hi.baidu.com/koen_li#">3、来源于网络，版权属于作者</a></li>
<li><a href="http://hi.baidu.com/koen_li#">4、来源于网络，版权属于作者</a></li>
<li><a href="http://hi.baidu.com/koen_li#">5、更多精彩请点击进入我的空间^^</a></li>
</ul>
</div>
</div>
</body>
</html>