利用JS做网页特效——大图轮播

大图轮播完整流程代码操作:

<style>
            * {
                margin: 0px;
                padding: 0px;
            }
            
            .stage {
                width: 500px;
                height: 300px;
                border: 5px solid black;
                margin: 200px;
                position: relative;
                overflow: hidden;
            }
            
            .to-left,
            .to-right {
                position: absolute;
                top: 0px;
                width: 50px;
                height: 300px;
                background-color: black;
                color: white;
                font-size: 30px;
                text-align: center;
                line-height: 300px;
                opacity: 0.3;
            }
            
            .to-left {
                left: 0px;
            }
            
            .to-right {
                right: 0px;
            }
            
            .to-left:hover,
            .to-right:hover {
                cursor: pointer;
                opacity: 0.5;
            }
            
            .banner {
                width: 3000px;
                height: 300px;
            }
            
            .items {
                float: left;
                width: 500px;
                height: 300px;
                background-color: blanchedalmond;
                font-size: 100px;
                text-align: center;
                line-height: 300px;
            }
        </style>
    </head>
<!--大图轮播特效-->
    <body>
        <div class="stage">
            <div class="to-left">
                <</div>
                    <div class="to-right">></div>
                    <div class="banner">
                        <div class="items">1</div>
                        <div class="items" style="">2</div>
                        <div class="items" style="">3</div>
                        <div class="items" style="">4</div>
                        <div class="items" style="">5</div>
                        <div class="items">1</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));
    }
    
    to_left.onclick = function() {
        toLeft();
    }

    function toLeft(){
        arr.push(window.setInterval("moveRight()", 30));
    }
    
    function moveLeft() {
        if(count < 5) {
            if(banner.offsetLeft > count * (-500)) {
                banner.style.marginLeft = banner.offsetLeft - 20 + "px";
            } else {
                for(var x in arr) {
                    window.clearInterval(arr[x]);
                }
                count++;
            }
//    连接点
        }else{
            if(banner.offsetLeft > count * (-500)) {
                banner.style.marginLeft = banner.offsetLeft - 20 + "px";
            } else {
                for(var x in arr) {
                    window.clearInterval(arr[x]);
                }
                count = 1;
                banner.style.marginLeft = 0 + 'px';
            }
        }
    }
    
    function moveRight() {
        if(count-1 >0) {
            if(banner.offsetLeft < (count-2) * (-500)) {
                banner.style.marginLeft = banner.offsetLeft + 20 + "px";
            } else {
                for(var x in arr) {
                    window.clearInterval(arr[x]);
                }
                count--;
            }
        }
    }
    window.setInterval("toRight()",1750);
    

</script>

posted @ 2017-08-08 22:10  WORSHIP亚萨  阅读(434)  评论(0编辑  收藏  举报