JavaScript - 轮播广告实例

来源：互联网发布：微云同步盘for mac 编辑：程序博客网时间：2024/05/22 01:43

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>轮播广告</title>
<style type="text/css">
        .hide{
            display: none;
        }

        #div1{
            position: absolute;
            top:50px;
            left:100px;
        }

        #div2{
            position: absolute;
            top:155px;
            left:435px;
        }

        a{
            display:block;
            float: left;
            width:15px;
            height: 15px;
            text-decoration: none;
            background-color: #fff;
            color:#000;
            margin-right: 3px;
            text-align: center;
            border: 1px solid #999;
            font-size:12px;
        }
</style>
<script type="text/javascript">
        var max=4;
        var now=1;
        var timer;

        window.onload=show;

        function show(id){
            if(Number(id)){
                now=id;
                clearTimeout(timer);//清除原来的计时器
            }

            for(var i=1;i<=max;i++){
                if(i==now){
                    document.getElementById("adv"+now).style.display="block"; //显示当前图片
                }else{
                    document.getElementById("adv"+i).style.display="none";
                }
            }
            if(now==max){
                now=1;
            }else{
                now++;
                }

            timer=setTimeout("show()",2000); //创建计时器，两秒钟执行
            }
</script>
</head>
<body>
   <div id="div1">
        <img src="images/class1-1.jpg" id="adv1" />
        <img src="images/class1-2.jpg" id="adv2" class="hide"/>
        <img src="images/class1-3.jpg" id="adv3" class="hide"/>
        <img src="images/class1-4.jpg" id="adv4" class="hide"/>
    </div>
    <div id="div2">
        <a href="javascript:show(1)">1</a>
        <a href="javascript:show(2)">2</a>
        <a href="javascript:show(3)">3</a>
        <a href="javascript:show(4)">4</a>
    </div>
</body>
</html>

0 0