zoukankan      html  css  js  c++  java
  • 自动轮播

    <!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;
        650px;
        padding:10px;
        position:relative;
        }
    #nav li{
        display:inline-block;
        padding:10px 20px;
        }    
    img{
        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>
  • 相关阅读:
    项目中docker swarm实践
    Spring的分模块开发的配置
    单点登录
    在服务器搭建git服务器
    Learn Git Lesson06
    kafka Poll轮询机制与消费者组的重平衡分区策略剖析
    gulp初体验
    vue-cli3中axios如何跨域请求以及axios封装
    vue-cli3中怎么配置vue.config.js文件
    svn的下载与安装,使用,包教包会!!!
  • 原文地址:https://www.cnblogs.com/mayufo/p/4176091.html
Copyright © 2011-2022 走看看