我的大图轮播的程序 

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>

* {
                margin: 0px;
                padding: 0px;
            }
            
            .stage {
                width: 430px;
                height: 400px;
                border: 5px solid black;
                margin: 200px;
                position: relative;
                overflow: hidden;
            }
            
            .to-left,
            .to-right {
                position: absolute;
                top: 0px;
                width: 50px;
                height: 400px;
                background-color: black;
                color: white;
                font-size: 30px;
                text-align: center;
                line-height: 400px;
                opacity: 0.3;
            }
            
            .to-left {
                left: 0px;
            }
            
            .to-right {
                right: 0px;
            }
            
            .to-left:hover,
            .to-right:hover {
                cursor: pointer;
                opacity: 0.5;
            }
            
            .banner {
                width: 2500px;
                height: 300px;
            }
            
            .items {
                float: left;
                width: 430px;
                height: 400px;
                background-color: blanchedalmond;
                font-size: 100px;
                text-align: center;
                line-height: 300px;
            }
    </style>
    
    <body>
        <div class="stage">
                <div class="to-left"><</div>
                <div class="to-right">></div>
                
                <div class="banner">
                    <div class="items"><img class="popMUSIC" src="./img/摇滚3.jpg"  height="400px" width="430px"></div>
                
                
                <div class="items" ><img class="photo-2" src="./img/摇滚6.jpg" height="400px" width="430px"></div>
                    
                <div class="items" ><img class="popMUSIC" src="./img/摇滚.jpg"  height="400px" width="430px"></div>
                    
                
                <div class="items" ><img class="popMUSIC" src="./img/摇滚7.jpg"  height="400px" width="430px" ></div>
                    
                    
                
                <div class="items" ><img class="popMUSIC" src="./img/摇滚5.jpg"  height="400px" width="430px"></div>
                    
                </div>
            <!--</div>-->
        </div>
    </body>
</html>

<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()',30));
    }
    function moveleft(){
        if(count<5){
            if(banner.offsetLeft>count*(-430)){
        banner.style.marginLeft =banner.offsetLeft -20+'px';
        }else{
            for( var x in arr){
                window.clearInterval(arr[x]);
            }
            count++;
        }
    }
}

 

posted @ 2017-08-14 11:33  军师联盟  阅读(130)  评论(0)    收藏  举报