#container{
        position: relative;
        width:1350px;
        height: 600px;
        overflow: hidden;
    }
    #list{
        position: absolute;
        z-index: 1;
        width: 9450px;
        height: 600px;
    }
    #list img{
        float: left;
        width: 1350px;
        height: 600px
    }
    #buttons{
        position: absolute;height: 10px;width: 100px;
        z-index: 2;bottom: 50px;left:650px;
    }
    #buttons span{
        float: left;
        margin-right: 5px;
        width: 15px;
        height: 15px;
        border: 1px solid #fff;
        border-radius: 50%;
        background: #333;
        cursor: pointer;
    }
    #buttons .on{
        background-color: red;
    }
    .arrow{
        position: absolute;
        top: 280px;

        z-index: 2;/*
        display: none;*/
        width: 40px;
        height: 40px;
        font-size: 36px;
        font-weight: bold;
        line-height: 39px;
        text-align: center;
        color: #fff;
        background-color: rgba(0,0,0,3);
        cursor: pointer;/*鼠标指针变成手的形状*/
    }
    .arrow:hover{
        background-color: rgba(0,0,0,.7);
    }
    #container:hover.arrow{
        display: block;
    }
    #prev{
        left: 80px;
    }
    #next{
        right: 80px;
    }
    * {
            margin: 0;
            padding: 0;
            text-decoration: none;
        }

       body {
           padding: 0px;
        }
    </style>
    <script type="text/javascript">
        /* 在整个页面加载完毕以后获取元素 */
        window.onload=function (){
            var container =document.getElementById('container');
            var list=document.getElementById('list');
            var buttons=document.getElementById('buttons').getElementsByTagName('span');//获取5个按钮
            var prev=document.getElementById('prev');//上一个
            var next=document.getElementById('next');//下一个
            
            function animate(offset){
                var newLeft =  parseInt(list.style.left) + offset;
                list.style.left = newLeft + 'px';
                if(newLeft > -1350){
                    list.style.left = -6750 + 'px'
                }
                if (newLeft < -6750){
                    list.style.left = -1350 + 'px'
                }
            }
            next.onclick = function(){
                index += 1;
                showButton();
                animate(-1350);
            }
            prev.onclick = function(){
                animate(1350);
                index -= 1;
                showButton();
            }
       

    }
    </script>