<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #pic{
            width: 500px;
            height:400px;
            margin: 0 auto;
            position: relative;
            text-align: center;
        }
        #pic img{
            width: 500px;
            height:400px;
        }
        #pic a{
            width: 36px;
            height: 36px;
            border-radius:18px;
            display: inline-block;
            text-decoration: none;
            background: #f4511e;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            line-height: 36px;
            color: white;
            position: absolute;
            opacity: 0.6;
        }
        #left{
              top:200px;
              left: 5px;
          }
        #right{
            top:200px;
            right: 5px;
        }
        #pic input{
            width: 14px;
            height: 14px;
            border-radius: 7px;
            border: 0px;
        }
        .avtive{
            background: #f4511e;
        }
        #pic a:hover{
            opacity: 1;
        }
    </style>
    <script>
        window.onload= function () {
            var oDiv=document.getElementById('pic');
            var oImg=oDiv.getElementsByTagName('img')[0];
            var oLeft=document.getElementById('left');
            var oRight=document.getElementById('right');
            var aBtn=oDiv.getElementsByTagName('input');
            var arrImg=['imgs/s1.jpg','imgs/s2.jpg','imgs/s3.jpg','imgs/s4.jpg'];
            var num = 0;
            oImg.src=arrImg[num];
            oLeft.onclick=function(){
                num--;
                if(num == -1){
                    num=arrImg.length-1;
                }
                oImg.src=arrImg[num];
            }
            oRight.onclick = function () {
                num++;
                if (num == arrImg.length) {
                    num = 0;
                }
                oImg.src=arrImg[num];
            }
        }
    </script>
</head>
<body>
<div id="pic">
    <img src="" alt=""/>
    <a  id="left" href=""><</a>
    <a  id="right" href="">></a>
    <input type="button"/>
    <input type="button"/>
    <input type="button"/>
    <input type="button"/>
</div>
</body>
</html>