|
<!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>
<title>很酷的仿Flash图片幻灯切换效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
*{margin:0;padding:0;border:0;list-style:none;}
body{font:12px/1.5 Verdana,Geneva,sans-serif;background:#eee;padding:20px;}
/*=========mF_liquid ========*/
.mF_liquid{position:relative;width:450px;height:296px;overflow:hidden;font:12px/1.5 Verdana,Geneva,sans-serif;background:#fff;}
.mF_liquid .loading{position:absolute;z-index:9999;width:100%;height:100%;color:#666;text-align:center;padding-top:90px;background:#fff url(http://www.zzsky.cn/effect/images/201008111055/loading.gif) center -40px no-repeat;}/*载入画面*/
.mF_liquid .pic li,.mF_liquid .mod li{position:absolute;top:0;right:0;width:450px;height:296px;overflow:hidden;}
.mF_liquid .pic li img{position:absolute;right:0;width:450px;height:296px;}/*图片和焦点图框架一样大小*/
.mF_liquid .mod li img{width:100%;height:100%;}
.mF_liquid .num{position:absolute;z-index:3;bottom:8px;right:8px;color:#333;}/*按钮样式*/
.mF_liquid .num li{float:left;width:22px;height:18px;position:relative;line-height:18px;border:1px solid #196BA9;text-align:center;margin-right:3px;cursor:pointer;background:#dedede;filter:alpha(opacity=80);opacity:0.8;}
.mF_liquid .num li.current,.mF_liquid .num li.hover{background:#09f;color:#fff;font-weight:bold;height:20px;line-height:20px;top:-2px;}
</style>
<script type="text/javascript">
var myFocus={
//Design By Koen @ 2010.8.x
//http://hi.baidu.com/koen_li
//koen_lee@qq.com
$:function(id){return document.getElementById(id);},
$$:function(tag,obj){return (typeof obj=='object'?obj:this.$(obj)).getElementsByTagName(tag);},
linear:function(t,b,c,d){return c*t/d + b;},
easeOut:function(t,b,c,d){return -c*((t=t/d-1)*t*t*t - 1) + b;},
move:function(obj,dir,val,type,spd,fn){//位移函数，spd越大速度越小，即分更多的帧来完成，一般建议设置在dis值左右
var t=0,b=parseInt(obj.style[dir])||0,c=val-b,d=spd||50,st=type||'linear',m=c>0?'ceil':'floor';
if(obj[dir+'Timer']) clearInterval(obj[dir+'Timer']);
obj[dir+'Timer']=setInterval(function(){
if(t<d){obj.style[dir]=Math[m](myFocus[st](++t,b,c,d))+'px';}
else {clearInterval(obj[dir+'Timer']);fn&&fn.call(obj);}
},10);return this;
},
zoom:function(obj,attr,val,type,spd,fn){//缩放函数，参数设置同move
var t=0,b=obj['offset'+attr.replace(/^(.)/,new Function('return arguments[1].toUpperCase()'))],c=val-b,d=spd||50,st=type,m=c>0?'ceil':'floor';
if(obj[attr+'Timer']) clearInterval(obj[attr+'Timer']);
obj[attr+'Timer']=setInterval(function(){
if(t<d){obj.style[attr]=Math[m](myFocus[st](++t,b,c,d))+'px';}
else {clearInterval(obj[attr+'Timer']);fn&&fn.call(obj);}
},10);return this;
},
stop:function(obj){//停止所有运动函数
var animate=['left','right','top','bottom','width','height','fade'];
for(var i=0;i<animate.length;i++) if(obj[animate[i]+'Timer']) clearInterval(obj[animate[i]+'Timer']);
return this;
},
addList:function(obj,cla,arr){//生成HMTL列表部分，cla为生成列表的class，cla='txt'表示把图片alt生成其中的文字，cla='num'表示生成按钮数字
var s=[],n=this.$$('li',this.$$('ul',obj)[0]).length,num=cla.length;
for(var j=0;j<num;j++){
s.push('<ul class='+cla[j]+'>');
for(var i=0;i<n;i++){s.push('<li>'+(cla[j]=='num'?(i+1):(cla[j]=='txt'?this.$$('li',obj)[i].innerHTML.replace(/\<img.*?\>/i,this.$$('img',obj)[i].alt):''))+'<span></span></li>')};
s.push('</ul>');
}; obj.innerHTML+=s.join('');
},
setting:function(par){//设置DOM/文档加载就绪后执行的任务
if(window.attachEvent){window.attachEvent('onload',function(){myFocus[par.style](par)});}
else{window.addEventListener('load',function(){myFocus[par.style](par)},false);}
},
//下面是风格样式（皮肤），格式mF_xxx（xxx是皮肤名字）
mF_liquid:function(par){
var box=this.$(par.id),t=par.time*1000;//焦点图盒子、停留时间
this.addList(box,['mod','num']);
var PIC=this.$$('ul', box)[0],MOD=this.$$('ul', box)[1],BTN=this.$$('ul', box)[2];
var pic=this.$$('li',PIC),mod=this.$$('li',MOD),btn=this.$$('li',BTN);
var w=pic[0].offsetWidth,n=pic.length;
MOD.innerHTML=PIC.innerHTML;
for(var i=0;i<n;i++){//初始化样式设置
mod[i].style.width=w*10+'px';
mod[i].style.right=w+'px';
pic[i].style.zIndex=1;
pic[i].style.width=0+'px';
}
var index = 0;//开始显示的序号
box.removeChild(this.$$('div',box)[0]);
btn[index].className = 'current';
this.move(mod[index],'right',0,'linear',8,function(){
myFocus.zoom(pic[index],'width',w,'easeOut',90);
myFocus.move(this,'right',-w*9,'easeOut',90)
});
var run = function(idx) {
myFocus.stop(mod[index]).stop(pic[index]);
mod[index].style.right=w+'px';
pic[index].style.width=0+'px';
btn[index].className = '';
if(index==n-1) index=-1;
var N=idx!=undefined?idx:index+1;
myFocus.move(mod[N],'right',0,'linear',8,function(){
myFocus.zoom(pic[N],'width',w,'easeOut',90);
myFocus.move(this,'right',-w*9,'easeOut',90)
});
btn[N].className = 'current';
index = N;
}
var auto=setInterval(function(){run()},t);
for (var j=0;j<n;j++){
btn[j].j=j;
btn[j].onmouseover=function(){if(!this.className) run(this.j)}
}
box.onmouseover=function(){clearInterval(auto);}
box.onmouseout=function(){auto=setInterval(function(){run()},t);}
}
};
//
myFocus.setting({
style:'mF_liquid',//风格样式，更多风格是请留意myFocus正式版的发布
id:'myFocus',//焦点图ID
time:3//每帧的停留时间，单位秒
});
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div id="myFocus" class="mF_liquid">
<div class="loading"><span>请稍候……</span></div><!--载入画面-->
<ul class="pic"><!--内容列表-->
<li><a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081114473778.jpg" alt="图片1来源于网络，版权属于作者"></a></li>
<li><a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081114473770.jpg" alt="版权属于作者，图片2来源于网络"></a></li>
<li><a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081114473748.jpg" alt="图片3来源于网络，版权属于作者"></a></li>
<li><a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081114473787.jpg" alt="版权属于作者，图片4来源于网络"></a></li>
</ul>
</div>
</body>
</html> |
注册 登录
