|
<!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>CSS+JS滑动门式的图片轮番切换</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.ldh_fx_panel{width:667px;position:relative;overflow:hidden;}
.ldh_fx_panel img{border:none;width:669px;height:414px;}
.ldh_fx_wrap{height:414px;overflow:hidden;}
.ldh_fx_nav{position:absolute;bottom:0px;width:110%;height:28px;}
.ldh_fx_nav a{display:block;float:left;display:inline;width:132px;height:100%;line-height :28px;text-decoration:none;margin-right:2px;font:14px/2.2 arial;position:relative;}
.ldh_fx_nav a .ldh_fx_link_bg{display:block;height:100%;background:#666;filter:Alpha(opacity=70);opacity:0.7;zoom:1;}
.ldh_fx_nav a .ldh_fx_link_txt{position:absolute;top:0;left:0;display:block;width:100%;text-align:center;cursor:pointer;color:#fff;}
.ldh_fx_nav a:hover .ldh_fx_link_bg,.ldh_fx_nav a.hot .ldh_fx_link_bg{background:#fff;}
.ldh_fx_nav a:hover .ldh_fx_link_txt,.ldh_fx_nav a.hot .ldh_fx_link_txt{color:#000}
</style>
</head>
<body>
<div class="ldh_fx_panel">
<div class="ldh_fx_wrap" id="ad_slide">
<a href="" ><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010082708463386.jpg" alt="" /></a>
<a href="" ><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010082708463353.jpg" alt="" /></a>
<a href="" ><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010082708463343.jpg" alt="" /></a>
<a href="" ><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010082708463382.jpg" alt="" /></a>
<a href="" ><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010082708463327.jpg" alt="" /></a>
</div>
<div class="ldh_fx_nav" id="ldh_fx_nav">
<a href="" ><span class="ldh_fx_link_bg"></span><span class="ldh_fx_link_txt">永远的迷：巨石阵</span></a>
<a href="" ><span class="ldh_fx_link_bg"></span><span class="ldh_fx_link_txt">英国乡村</span></a>
<a href="" ><span class="ldh_fx_link_bg"></span><span class="ldh_fx_link_txt">黑龙江</span></a>
<a href="" ><span class="ldh_fx_link_bg"></span><span class="ldh_fx_link_txt">绿水绿草</span></a>
<a href="" ><span class="ldh_fx_link_bg"></span><span class="ldh_fx_link_txt">神奇九寨</span></a>
</div>
</div>
</body>
<script type="text/javascript">
function PicSlide(panel,opt){
this.panel=typeof panel=="string"?document.getElementById(panel):panel;
for(var k in opt)this[k]=opt[k]
this.init()
};
PicSlide.prototype={
current:0,
timer:null,
time:500,
type:'scroll',
act:'scroll',
interval:4000,
init:function (){
var _this=this,world=this.panel.parentNode;
this.imgs=this.panel.getElementsByTagName('A');
for(var i=0,l=this.imgs.length;i<l;i++)
this.imgs[i].style.cssText='position:absolute;display:'+(i==0?'':'none');
this.createTab();
this.interval=Math.max(this.interval,this.time);
world.onmouseover=function (){_this.hover=true};
world.onmouseout=function (){_this.hover=false};
this.auto()
},
createTab:function (){
var len=this.imgs.length,btn,_this=this;
this.nav=document.getElementById('ldh_fx_nav');
this.btns=this.nav.getElementsByTagName('A');
for(var i=0;i<len;i++){
btn=this.btns[i];
if(i==0)btn.className='hot';
btn.radioIndex=i;
btn.onmouseover=function (){_this.focus(this.radioIndex)}
}
},
focus:function (next){
next=next%this.imgs.length;
if(next==this.current)return;
this.btns[this.current].className='';
this.btns[next].className='hot';
this.fade(next);
},
fade:function (next){
var _this=this;
clearInterval(this.timer);
this.timer=this.fx(1,0,function (x){
_this.opacity( _this.imgs[_this.current],x)
},function (){
_this.imgs[_this.current].style.display='none';
_this.opacity(_this.imgs[next],0);
_this.imgs[next].style.display='';
_this.current=next;
_this.timer=_this.fx(0,1,function (x){
_this.opacity( _this.imgs[next],x)
},0,200,.5)
})
},
fx:function (f,t,fn,ed,tm,r){
var D=Date,d=new D,e,ed=ed||D,c=tm||300,r=r||5;
return e=setInterval(function (){
var z=Math.min(1,(new D-d)/c);
var stop=fn(+f+(t-f)*Math.pow(z,r),z);
if(z==1||false===stop)ed(clearTimeout(e))
},10)
},
opacity:function (el,n){
el.style.filter='progid:DXImageTransform.Microsoft.Alpha(opacity='+n*100+');';
if(n==1)el.style.filter=null;
el.style.opacity=n;
},
auto:function (){
var _this=this;
setInterval(function (){if(!_this.hover)_this.focus(_this.current+1)},this.interval);
}
};
var ldh_tb=new PicSlide('ad_slide',{type:'opacity'});
</script>
</html> |
注册 登录
