您的位置：首页 > Web前端 > JavaScript

JavaScript - 轮播广告实例

2015-04-29 17:52 260 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 轮播广告轮播广告

相关文章推荐

新的分享

章节导航