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

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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="//ku.shouce.ren/files/images/201601/56a33e32b50c4.jpg" alt="" /></a>
        <a href="" ><img src="//ku.shouce.ren/files/images/201601/56a33e344a8eb.jpg" alt="" /></a>
        <a href="" ><img src="//ku.shouce.ren/files/images/201601/56a33e356a3b2.jpg" alt="" /></a>
        <a href="" ><img src="//ku.shouce.ren/files/images/201601/56a33e362e383.jpg" alt="" /></a>
        <a href="" ><img src="//ku.shouce.ren/files/images/201601/56a33e36ccf00.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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

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

分类

图片代码

描述

CSS+JS滑动门式的图片轮番切换，原型是一个滑动门，又结合了图片特效，整体效果感觉挺不错，对JavaScript的学习帮助挺大。