大图轮播

<style>
    .login{                                
                width: 50px;
                height: auto;
                list-style: none;            
                line-height: 30px;
                color: #000000;
                font-size: 15px;
                font-family: "楷体";    
                text-decoration: none;
                float: left;
                text-align: center;            
            }
            .login:hover {
                cursor: pointer;
                background-color: greenyellow;
            }
            .mask {
                width: 100%;
                background-color: black;
                opacity: 0.5;
                position: absolute;
                top: 0px;
                left: 0px;
                z-index: 90;
            }
    
     .stage {
                width: 1034px;
                height: 700px;
                /*border: 5px solid black;*/
                /*margin: 200px;*/
                position: relative;
                overflow: hidden;
            }
            .banner {
                width: 5170px;
                height: 700px;
                /*z-index: 10;*/
                /*overflow: hidden;*/
            }
            .items {
                float: left;
                width: 1034px;
                height: 700px;
                background-color: blanchedalmond;
                /*font-size: 100px;*/
                /*text-align: center;*/
                /*line-height: 690px;*/
            }
            .to-left,
            .to-right {
                position: absolute;
                top: 0px;
                width: 80px;
                height: 700px;
                background-color: black;
                color: white;
                font-size: 50px;
                text-align: center;
                line-height: 700px;
                opacity: 0.3;
                z-index: 99;
            }
            
            .to-left {
                left: 0px;
            }
            
            .to-right {
                right: 0px;
            }
            
            .to-left:hover,
            .to-right:hover {
                cursor: pointer;
                opacity: 0.5;
            }
            .log-div {
                width: 500px;
                height: 300px;
                background-color: aqua;
                position: fixed;
                /*top: 30%;*/
                /*left: 30%;*/
                z-index: 99;                
            }
            .dlu{
                width: 250px;
                height: 40px;
                /*border: 1px solid black;*/
                margin:30px 0px 0px 100px;
                float: left;
                text-align: center;
                line-height: 40px;
                font-size: 19px;
                
            }
            .denglu{
                width: 160px;
                height: 40px;
                float: right;
                font-size: 16px;
            }
            .dlu1{
                width:250px;
                height: 40px;
                /*border: 1px solid black;*/
                margin:30px 0px 0px 100px;
                float: left;
                text-align: center;
                line-height: 40px;
                font-size: 19px;
                
            }
            .denglu1{
                width: 160px;
                height: 40px;
                float: right;
                font-size: 16px;
            }
            .guanbi{
                width: 40px;
                height: 30px;
                margin: 0.5px 0px 0px 460px;
                background-color: #87CEFA;
                font-size: 16px;
                text-align: center;
                line-height: 30px;
            }
            .guanbi:hover{
                cursor: pointer;
            }
            .tijiao{
                width: 40px;
                height: 20px;
                background-color: #A52A2A;
                text-align: center;
                line-height: 20px;
                margin: 200px 0px 0px     250px;                
            }
            .tijiao{
                cursor: pointer;
            }





</style>

 

　　

<div class="mask" hidden>

</div>
                        <div class="log-div" hidden="hidden">
                            <div class="guanbi">
                                关闭
                            </div>
                            <div class="dlu">账号:
                                <input class="denglu" type="text" placeholder="请输入账号"/>
                            </div>
                            <div class="dlu1">密码    
                                <input class="denglu1" type="password" placeholder="请输入密码"/>
                            </div>
                            <div class="tijiao">登 录</div>
                        </div>
                        <div class="login">登 录</div>
                        
                        <div class="login">注 册</div>
                        
                        <img src="img/lvyou3.jpg" style="margin-left: 50px;"
                    </div>
                    
                </div>

js代码

<script>
    var to_right = document.getElementsByClassName('to-right')[0];
    var to_left = document.getElementsByClassName('to-left')[0];
    var banner = document.getElementsByClassName('banner')[0];
    var arr = [];
    var count = 1;

    to_right.onclick = function() {
        toRight();
    }
    
    function toRight(){
        arr.push(window.setInterval("moveLeft()", 22));
    }
    
    to_left.onclick = function() {
        toLeft();
    }

    function toLeft(){
        arr.push(window.setInterval("moveRight()", 22));
    }
    
    function moveLeft() {
        if(count < 5) {
            if(banner.offsetLeft > count * (-1034)) {
                banner.style.marginLeft = banner.offsetLeft - 22 + "px";
            } else {
                for(var x in arr) {
                    window.clearInterval(arr[x]);
                }
                count++;
            }
        }
    }
    
    function moveRight() {
        if(count > 1) {
            if(banner.offsetLeft < (count-2) * (-1034)) {
                banner.style.marginLeft = banner.offsetLeft + 22 + "px";
            } else {
                for(var x in arr) {
                    window.clearInterval(arr[x]);
                }
                count--;
            }
        }
    }