自动轮播 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{
    margin:0px;
    padding:0px;
    list-style-type:none;
    }
#wrap{
    border:1px #CCC solid;
    margin:50px auto;
    width:650px;
    padding:10px;
    position:relative;
    }
#nav li{
    display:inline-block;
    padding:10px 20px;
    }    
img{
    width:600px;
    height:400px;
    border:1px solid #999;
    }
.subnav{
    position:absolute;
    left:620px;
    top:60px;
    }
.subnav li{
    height:50px;
    }        
        
</style>
<script type="text/javascript">
window.onload = function ()
{
    var arrimg = ['img/5-1.jpg','img/5-2.jpg','img/5-3.jpg','img/5-4.jpg','img/5-5.jpg','img/5-6.jpg'];
    var oimg = document.getElementsByTagName('img')[0];
    var onav = document.getElementById('nav');
    var oul = document.getElementsByTagName('ul');
    arrli = [];
    flag = 0;
    num = 0;
    timer = null;
    
    for( var i = 1; i < oul.length; i++)
    {
        var ali = oul[i].getElementsByTagName('li');
        for(var j = 0; j < ali.length; j++ )
        {
            arrli.push(ali[j]);
        }
    }
    
    function clear()
    {
        for( var i = 0; i < arrli.length; i++ )
        {
            arrli[i].style.cssText = 'background:#eee;color:#000';
        }
        
        for( var i = 0; i< oul[0].getElementsByTagName('li').length; i++)
        {
            oul[0].getElementsByTagName('li')[i].style.cssText = 'background:blue;color:#fff';
        }
    };
    
    function play()
    {
        clear();
        arrli[num].style.cssText = 'background:pink;color:#fff';
        oimg.src = arrimg[num];
        if( flag == 0)
        {
            onav.getElementsByTagName('li')[0].style.cssText = 'background:pink; color:#fff';
            oul[2].style.display = 'none';
            oul[1].style.display = 'block';
            num++;
            if( num == arrli.length/2 )
                flag = 1;
            
        }
        else
        {
            onav.getElementsByTagName('li')[1].style.cssText = 'background:pink; color:#fff';
            oul[1].style.display = 'none';
            oul[2].style.display = 'block';
            num++;
            if(num == arrli.length)
            {
                flag = 0;
                num =0;
            }
        }
    };
    
    timer = setInterval(play,1000);
};
</script>
</head>

<body>
    <div id="wrap">
    <ul id="nav">
        <li>菜单一</li>
        <li>菜单二</li>
    </ul>
    <img src="img/loading.gif">
    <ul class="subnav">
        <li>图片1</li>
        <li>图片2</li>
        <li>图片3</li>
    </ul>
    <ul class="subnav" style="display:none;">
        <li>图片4</li>
        <li>图片5</li>
        <li>图片6</li>
    </ul>
    </div>
</body>
</html>

 

posted @ 2014-12-21 00:40  mayufo  阅读(158)  评论(0)    收藏  举报