CSS+JS滑动门式的图片轮番切换_图片特效特效

CSS+JS滑动门式的图片轮番切换，原型是一个滑动门，又结合了图片特效，整体效果感觉挺不错，对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>
<title>CSS+JS滑动门式的图片轮番切换</title>
<meta http-equiv="Content-Type" mrc="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://p1.mb5u.com/texiao/1/20110225160540513.jpg" alt="" /></a>
        <a href="" ><img src="http://p1.mb5u.com/texiao/1/20110225160540514.jpg" alt="" /></a>
        <a href="" ><img src="http://p1.mb5u.com/texiao/1/20110225160540515.jpg" alt="" /></a>
        <a href="" ><img src="http://p1.mb5u.com/texiao/1/20110225160540516.jpg" alt="" /></a>
        <a href="" ><img src="http://p1.mb5u.com/texiao/1/20110225160540517.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>

所属频道：图片特效特效/更新时间：2012-11-21

[收藏][报错][返回列表]

CSS+JS滑动门式的图片轮番切换_图片特效特效

图片特效特效Rss订阅特效代码搜索

图片特效特效推荐

猜你也喜欢看这些