Untitled

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        #bannerBox{
            width:520px;
            margin: 0 auto;
            border:1px solid black;
            padding:10px;
            position: relative;
        }

        #bannerBox img{
            display: none;
        }
        /*子级元素 absolute。是要根据 具有定位能力的父亲级元素。*/
        #bannerBox input{
            position: absolute;
            top:40%;
        }
    </style>
</head>

<body>
    <div id ="bannerBox">
        <img src="images/banner01.jpg" style="display: block">
        <img src="images/banner02.jpg">
        <img src="images/banner03.jpg">
        <img src="images/banner04.jpg">
        <input type="button" name="" value="<" id="leftBtn" style="left:0;">
        <input type="button" name="" value=">" id="rightBtn" style="right:0;">
    </div>
    <script type="text/javascript">

    var slideRight = function() {
            tag++;
            if(tag>3){
                tag=0;
            }
            for(var i = 0; i < allImg.length; i++){
                allImg[i].style.display ='none';
            }
            allImg[tag].style.display ='block';
        }

        var slideLeft = function() {
            tag--;
            if(tag<0){
                tag=3;
            }
            for (i= 0; i<allImg.length; i++){
                allImg[i].style.display ='none';
            }
            allImg[tag].style.display ='block';
        }

        /*
        轮播图的制作
            1.会自动切换
            2.循环播放
            3.鼠标放上去后，停止播放，移出后恢复播放
            4.下方小圆点，可以点击切换图片
            5.左右可以切换


        */
        //1.实现自动切换
        //手动设置一个下标 用于 轮播图切换效果

        var tag = 0;
        var allImg = document.getElementById('bannerBox').getElementsByTagName('img');
        // console.log(allImg);

        var timer = setInterval(slideRight, 2000);
        //以上会一直++到两百多，不可行。

        //鼠标移入暂停，鼠标移出， 恢复轮播
        var oBox = document.getElementById('bannerBox');
        oBox.onmouseover = function(){
            // alert(1);
            clearInterval(timer);
        }

        oBox.onmouseleave= function(){
            //去掉 var 避免变成局部， 直接 set value to the timer
            timer = setInterval(slideRight, 2000);
        }
        // 设置左右箭头， 按钮

        // 给按钮安装点击事件
        // 按完之后切换图片

        var oLeft = document.getElementById('leftBtn');
        oLeft.onclick = slideLeft;

        var oRight = document.getElementById('rightBtn');
        oRight.onclick = slideRight;
    </script>

</body>
</html>