简易的图片轮播

今天主要学习了轮播图的原理和简易制作，以下是我轮播图的代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style type="text/css">

        p{
            text-align: center;
            font-size: 25px;
            color: rgb(95, 152, 160);
            font-family: fantasy;

        }

        .imgBox{
            position: absolute;
            left: 25%;
            border-top: 2px solid rgb(95, 152, 160);
            width: 50%;
            height: 500px;
        }

        .imgBox img{
           width: 50%;
            margin: 0 auto;
            padding-top: 30px;

        }

        .img1{
            display: block;
        }

        .img2{
            display: none;
        }

        .img3{
            display: none;
        }
        .btn-ctrl{
            position: relative;
            top: 20%;
            cursor: pointer;
            font-size: 36px;
            color: red;
            font-weight: 500;
        }
        #btn-prev{
            left: 0px;
            float: left;
        }
        #btn-next{
            right: 0px;
            float: right;
        }
    </style>
</head>
<body>
<p>图片轮播</p>

<div class="imgBox">
        <div id="btn-prev" class="btn-ctrl" onclick="clock(0)">&lt;</div>
        <div id="btn-next" class="btn-ctrl" onclick="clock(1)">&gt;</div>
    <img class="img-slide img1"  src="images/1.jpg">
    <img class="img-slide img2"  src="images/2.jpg">
    <img class="img-slide img3"  src="images/3.jpg">
</div>

</body>
<script type="text/javascript">
    var index=0;
    function changeImg() {
        index++;
        var a=document.getElementsByClassName("img-slide");
        if(index>=a.length) index=0;
        for(var i=0;i<a.length;i++){
            a[i].style.display='none';
        }
        a[index].style.display='block';
    }
    function clock(cc){
        switch(cc){
            case 0:
                index=index-2;
                if(index<-1) index=1;
                break;
            case 1:
               index;
                break;
        }
    }
      setInterval(changeImg,2000);
</script>
</html>

原理：用js获取图片的类组成数组，利用循环将所有图片都先隐藏，再利用图片数组下标逐个显示。