首页 > 代码库 > 大图轮播

大图轮播

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            * {
                margin: 0px;
                padding: 0px;
            }
           
            .stage {
                width: 300px;
                height: 200px;
                border: 10px solid black;
                margin: 50px;
                margin-left: 200px;
                overflow: hidden;
                position: relative;
            }
           
            .ad-banner {
                width: 1500px;
                height: 200px;
            }
           
            .ad {
                width: 300px;
                height: 200px;
                float: left;
                font-size: 50px;
                line-height: 200px;
                color: white;
                text-align: center;
            }
           
            .left-btn,
            .right-btn {
                height: 200px;
                width: 20px;
                position: absolute;
                line-height: 200px;
                background-color: gray;
                opacity: 0.5;
                font-size: 20px;
                text-align: center;
            }
           
            .left-btn {
                left: 0px;
                top: 0px;
            }
           
            .right-btn {
                right: 0px;
                top: 0px;
            }
           
            .left-btn:hover,
            .right-btn:hover {
                cursor: pointer;
                opacity: 0.8;
            }
        </style>
    </head>

    <body>
        <div class="stage">
            <div class="left-btn">
                <</div>
                    <div class="right-btn">></div>
                    <div class="ad-banner">
                        <div class="ad" style="background-color: green;">1</div>
                        <div class="ad" style="background-color: royalblue;">2</div>
                        <div class="ad" style="background-color: red;">3</div>
                        <div class="ad" style="background-color: yellow;">4</div>
                        <div class="ad" style="background-color: gray;">5</div>
                    </div>
            </div>
    </body>

</html>
<script>
    var speed = 10;
    var count = 1;
    var arr = Array();
    document.getElementsByClassName("right-btn")[0].onclick = function() {
        arr.push(window.setInterval(moveToLeft, 10));
    }
    function moveToLeft() {
        var banner = document.getElementsByClassName("ad-banner")[0];
        if(banner.offsetLeft > count * (-300)&&count<5) {
            banner.style.marginLeft = banner.offsetLeft - speed + "px";
        } else {
            if(count<5)
            {count++;}
            for(var i in arr) {
                window.clearInterval(arr[i]);
            }
        }
    }
    document.getElementsByClassName("left-btn")[0].onclick = function() {
        arr.push(window.setInterval(moveToRight, 10));
    }
    function moveToRight() {
        var banner = document.getElementsByClassName("ad-banner")[0];
        if(banner.offsetLeft < (count-2) * (-300)&&count>1) {
            banner.style.marginLeft = banner.offsetLeft + speed + "px";
        } else {
            if(count>1)
            {count--;}
            for(var i in arr) {
                window.clearInterval(arr[i]);
            }
        }
    }
</script>

技术分享

       技术分享

 

大图轮播