新浪数码轮播

时间：2014-12-24 14:39:11 阅读：117 评论：0 收藏：0 [点我收藏+]

标签：

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

<style>
*{
    margin:0px;
    padding:0px;
    }
ul{
    overflow:hidden;
    position:relative;
}
h2{
    font-size:14px;
    font-weight:normal;
    text-align:center;
    }
li{
    list-style-type:none;
    float:left;
    }
#wrap{
     background:#D6EFF7;
     border:1px #73bdef solid;
     margin:50px auto;
     width:800px;
     height:280px;
     padding:10px;
     position:relative;
 }
#tabs{
    margin-left:300px;
    }
    
#tabs li{
    background:#CCC;
    padding:6px 30px;
    margin-right:15px;
    font-size:12px;
    color:#087b00;
    border:1px solid #a5def7;
    }
#new,#geek{
    position:absolute;
    width:820px;
    height:265px;
    left:0px;
    top:35px;
    background:#fff;
    
}
.left img{
    width:250px;
    height:220px;
    background:red;
    margin:10px 10px 2px;
    }
.left p{
    margin-left:10px;
    width:250px;
    text-align:center;
    background:#D6EFF7;
    line-height:20px;
    font-size:12px;
}
#new .showbox, #geek .showbox{
    position:absolute;
    top:10px;
    left:270px;
    width:540px;
    height:220px;
    overflow:hidden;
}
#new ul, #geek ul{
    width:1800px;
    }
#new ul img, #geek ul img{
    width:160px;
    height:150px;
    margin:0px 10px 5px;
    }
#new ul p, #geek ul p{
    font-size:12px;
    color:#999;
    width:160px;
    margin:5px 10px;
    }
#new .nav, #geek .nav{
    position:absolute;
    top:235px;
    width:540px;
    left:260px;
    }
.nav li{
    display:block;
    margin-right:60px;
    font-weight:bold;
    position:relative;
    left:200px;
    width:20px;
    height:20px;
    border:1px solid #73BDEF;
    text-align:center;
    padding:0 10px;
    cursor:pointer;
    }
#new .bullets, #geek .bullets{
    position:absolute;
    top:240px;
    left:510px;
    width:55px;
    }        
#new .bullets li, #geek .bullets li{
    display:block;
    width:10px;
    height:10px;
    border:1px solid #73BDEF;
    border-radius:10px;
    margin:0px 2px;
    background:#fff;
    }
#geek .bullets{
    left:525px;
    }                        
     
</style>
<script type="text/javascript" src="float.js"></script>
<script type="text/javascript">
window.onload = function ()
{
    var otabs = document.getElementById(‘tabs‘);
    var tli = otabs.getElementsByTagName(‘li‘);
    var onew = document.getElementById(‘new‘);
    var ogeek = document.getElementById(‘geek‘);
    
    var abull1 = onew.getElementsByClassName(‘bullets‘)[0].getElementsByTagName(‘li‘);
    var abull2 = ogeek.getElementsByClassName(‘bullets‘)[0].getElementsByTagName(‘li‘);
    var arrow1 = onew.getElementsByClassName(‘nav‘)[0].getElementsByTagName(‘li‘);
    var arrow2 = ogeek.getElementsByClassName(‘nav‘)[0].getElementsByTagName(‘li‘);
    var ashowbox = document.getElementsByClassName(‘showbox‘);
    var content1 = ashowbox[0].getElementsByTagName(‘ul‘)[0];
    var content2 = ashowbox[1].getElementsByTagName(‘ul‘)[0];
    
    var num = 0;
    
    //初始化
    tli[0].style.background = ‘#fff‘;
    onew.style.display = ‘block‘;
    abull1[0].style.background = ‘#999‘;
    abull2[0].style.background = ‘#999‘;
    
    //转换
    tli[0].onmouseover = function ()
    {
        for( var i = 0; i < tli.length; i++)
        {
            tli[i].style.background = ‘#EFEFF7‘;
        }
        this.style.background = ‘#fff‘;
        onew.style.display = ‘block‘;
        ogeek.style.display = ‘none‘;
    };
    
    tli[1].onmouseover = function ()
    {
        for( var i = 0; i < tli.length; i++)
        {
            tli[i].style.background = ‘#EFEFF7‘;
        }
        this.style.background = ‘#fff‘;
        onew.style.display = ‘none‘;
        ogeek.style.display = ‘block‘;
    };
    
    arrow1[1].onclick = function ()
    {
        num++;
        if( num == abull1.length )
        {
            num = abull1.length - 1;
        }
        domove(content1,‘left‘,30,30,-540*num,function ()
        {
            for ( var i = 0; i < abull1.length; i++)
            {
                abull1[i].style.background = ‘#fff‘;
            }
            abull1[num].style.background = ‘#999‘;
        })
    };
    
    arrow1[0].onclick = function ()
    {
        num--;
        if(num < 0)
        {
            num = 0;
        }
        domove(content1,‘left‘,30,30,-540*num,function()
        {
            for( var i = 0; i < abull1.length; i++)
            {
                abull1[i].style.background = ‘#fff‘;
            }
            abull1[num].style.background = ‘#999‘;
        })
    }
    
    
};
</script>

</head>

<body>
<div id="wrap">
    <ul id="tabs">
        <li>新品</li>
        <li>极客</li>
    </ul>
    <div id="new" style="display:block;">
        <div class="left">
            <img src="img/5-16.jpg">
            <p>枫叶</p>
        </div>
        <div class="showbox">
            <ul>
                <li>
                <img src="img/5-1.jpg">
                <h2>图片一</h2>
                <p>图片介绍图片介绍图片介绍</p>
                </li>
                <li>
                <img src="img/5-2.jpg">
                <h2>图片二</h2>
                <p>图片介绍图片介绍图片介绍</p>
                </li>
                <li>
                <img src="img/5-3.jpg">
                <h2>图片三</h2>
                <p>图片介绍图片介绍图片介绍图片介绍</p>
                </li>
                <li>
                <img src="img/5-4.jpg">
                <h2>图片四</h2>
                <p>图片介图片介绍图片介绍绍</p>
                </li>
                <li>
                <img src="img/5-5.jpg">
                <h2>图片五</h2>
                <p>图片介绍图片介绍图片介绍</p>
                </li>
                <li>
                <img src="img/5-6.jpg">
                <h2>图片六</h2>
                <p>图片介绍图片介绍图片介绍图片介绍</p>
                </li>
                <li>
                <img src="img/5-7.jpg">
                <h2>图片七</h2>
                <p>图片介绍图片介绍图片介绍图片介绍图片介绍</p>
                </li>
                <li>
                <img src="img/5-8.jpg">
                <h2>图片八</h2>
                <p>图片介图片介绍图片介绍图片介绍绍</p>
                </li>
                <li>
                <img src="img/5-9.jpg">
                <h2>图片九</h2>
                <p>图片介绍图片介绍图片介绍图片介绍</p>
                </li>
            </ul>
        </div>
        <ul class="nav">
            <li class="lf"><</li>
            <li class="rt">></li>
        </ul>
        <ul class="bullets">
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div id="geek" style="display:none;">
        <div class="left">
            <img src="img/5-15.jpg">
            <p>枫叶</p>
        </div>
        <div class="showbox">
            <ul>
                <li>
                <img src="img/5-6.jpg">
                <h2>图片六</h2>
                <p>图片介绍图片介绍图片介绍</p>
                </li>
                <li>
                <img src="img/5-7.jpg">
                <h2>图片七</h2>
                <p>图片介绍图片介绍图片介绍</p>
                </li>
                <li>
                <img src="img/5-8.jpg">
                <h2>图片八</h2>
                <p>图片介绍图片介绍图片介绍图片介绍</p>
                </li>
            </ul>
        </div>
        <ul class="nav">
            <li class="lf"><</li>
            <li class="rt">></li>
        </ul>
        <ul class="bullets">
            <li class="active"></li>
        </ul>
    </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);
};

新浪数码轮播

标签：

原文地址：http://www.cnblogs.com/mayufo/p/4182351.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行