自动切换 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>

<style>
#wrap{
    width:600px;
    height:400px;
    border:5px #CCCCCC solid;
    margin:50px auto;
    position:relative;
    overflow:hidden;
    }
#dimg{
    width:3600px;
    position:absolute;
    }
#info{
    font-size:14px;
    position:absolute;
    width:600px;
    top:400px;
    left:0px;
    }    
#info div{
    position:absolute;
    left:0px;
    top:0px;
    width:600px;
    background:#000;
    opacity:0.7;
    color:#fff;
    }
h1{
    margin:0px;
    font-size:24px;
    line-height:36px;
    padding:5px;
    }
p{
    margin:0px;
    padding:5px 5px 10px;
    line-height:20px;
    }                
</style>
<script type="text/javascript" src="float.js"></script>
<script type="text/javascript">
window.onload = function ()
{
    var odiv = document.getElementById('dimg');
    var aimg = odiv.getElementsByTagName('img');
    var num = 0;
    var timer = null;
    var oinfo = document.getElementById('info');
    var adiv = oinfo.getElementsByTagName('div');
    
    domove (adiv[0],'top',20,50,-97,function ()
    {
        setTimeout( function ()
        {
            domove(adiv[num],'top',20,50,0);
        },1500);
    });
    
    timer = setInterval(function()
    {
        target = -608*(num+1);
        domove(odiv,'left',20,20,target,function()
        {
            domove(adiv[num],'top',20,50,-97,function ()
            {
                setTimeout(function ()
                {
                    domove(adiv[num],'top',20,50,0);
                    if(num == aimg.length)
                    {
                        odiv.style.left = 0;
                        num = 0;
                    }
                },1500)
            })
        })
        num++;
    },3000);
    
    
    
};
</script>
</head>

<body>
<div id="wrap">
    <div id="dimg">
        <img src="img/5-1.jpg">
        <img src="img/5-2.jpg">
        <img src="img/5-3.jpg">
        <img src="img/5-1.jpg">
    </div>
    <div id="info">
        <div><h1>图片1</h1><p>描述一</p></div>
        <div><h1>图片2</h1><p>描述一</p></div>
        <div><h1>图片3</h1><p>描述一</p></div> 
        <div><h1>图片1</h1><p>描述一</p></div>       
    </div>
</div>
</body>
</html>
function getstyle(obj,attr)
{
    return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
}


function domove (obj,attr,step,frequency,target,endfn)
{
    step = parseInt(getstyle(obj,attr))<target?step:-step;
    clearInterval(obj.timer);
    obj.timer = setInterval( function ()
    {
        var speed = parseInt(getstyle(obj,attr)) + step;
        if(step>0&&speed>target||step<0&&speed<target)
        {
            speed = target;
        }
        obj.style[attr] = speed + 'px';
        if( speed == target )
        {
            clearInterval(obj.timer);
            endfn&&endfn();
        }
    },frequency); 
};

function opacity(obj,step,target,frequency,endfn)
{
    var currentOpacity = getstyle(obj,'opacity') * 100;
    step = currentOpacity < target?step:-step;
    clearInterval(obj.opacity)
    obj.opacity = setInterval (function ()
    {
        currentOpacity = getstyle(obj,'opacity') *100;
        var nextOpacity = currentOpacity + step;
        if(step>0&& nextOpacity>target || step<0&& nextOpacity < target )
        {
            nextOpacity = target;
        }
    obj.style.opacity = nextOpacity/100;
    obj.style.filter = 'alpha(opacity:)' + nextOpacity +')';
    if(nextOpacity == target )
    {
        clearInterval(obj.opacity);
        endfn&&endfn();
    }    
    },frequency);
    
    
};

function shake(obj,attr,endfn)
{
    if( obj.shaked ) { return;  }
    obj.shaked = true;
    
    var num = 0;
    var timer = null;
    var arr = [];
    var pos = parseInt(getstyle(obj,attr));
    
    for( var i = 20; i > 0; i-=2 )
    {
        arr.push(i,-i);
    }
    arr.push(0);
    
    clearInterval(obj.shake);
    obj.shake = setInterval(function ()
    {
        obj.style[attr] = pos + arr[num] +'px';
        num++;
        if(num==arr.length)
        {
            clearInterval(obj.shake);
            endfn&&endfn();
            obj.shaked = false;
        }
    },50);
};

这个代码用不了 后期存在Bug!开始显示是成功的

posted @ 2014-12-24 14:19  mayufo  阅读(195)  评论(0)  编辑  收藏  举报