大图轮播js

时间:2021-03-21 21:50:47

<!DOCTYPE html>
<html>

<head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                margin: 0px;
                padding: 0px;
            }
            
            #stage {
                width: 400px;
                height: 40px;
                border: 3px solid black;
                margin: 100px;
                overflow: hidden;
                position: relative;
            }
            
            #banner {
                width: 2400px;
                height: 300px;
                background-color: rosybrown;
            }
            
            .items {
                width: 400px;
                height: 40px;
                color: white;
                font-size: 25px;
                text-align: center;
                line-height: 300px;
                float: left;
            }
            
            .btn-l,
            .btn-r {
                width: 50px;
                height: 300px;
                background-color: black;
                opacity: 0.5;
                color: white;
                font-size: 40px;
                line-height: 300px;
                text-align: center;
                position: absolute;
                top: 0px;
            }
            
            .btn-l {
                left: 0px;
            }
            
            .btn-r {
                right: 0px;
            }
            
            .btn-l:hover,
            .btn-r:hover {
                cursor: pointer;
                /*透明度*/
                opacity: 0.2;
            }
        </style>
    </head>

<body>
        <div id="stage">
            <div class="btn-l">
                <</div>
                    <div class="btn-r">></div>
                    <div id="banner">
                        <div class="items" style="">平洋房产真实房源xxxx套</div>
                        <div class="items" style="">平阳房产真实在线交易xxxx套</div>
                        <div class="items" style="">平阳房产真实在线交易xxxx套</div>
                        <div class="items" style="">平阳房产真实在线交易xxxx套</div>
                        <div class="items" style="">平阳房产真实在线交易xxxx套</div>
                        <div class="items" style="">平洋房产真实房源xxxx套</div>
                    </div>
            </div>
    </body>

</html>
<script>
    var btn_l = document.getElementsByClassName('btn-l')[0];
    var btn_r = document.getElementsByClassName("btn-r")[0];
    var banner = document.getElementById("banner");
    var count = 1;
    var arr = [];

btn_r.onclick = function() {
        if(count < 6) {
            count++;
            arr.push(window.setInterval("move_left()", 20));
        } else if(count == 6) {
            count = 1;
            banner.style.marginLeft = 0 + "px";

count++;
            arr.push(window.setInterval("move_left()", 20));
        }
    }

btn_l.onclick = function() {
        if(count > 1) {
            count--;
            arr.push(window.setInterval("move_right()", 20));
        } else if(count = 1) {
            count = 5;
            banner.style.marginLeft = -2000 + "px";

count++;
            arr.push(window.setInterval("move_left()", 20));
        }
    }

function move_left() {
        if(banner.offsetLeft == (count - 1) * (-400)) {
            clear();
        } else {
            banner.style.marginLeft = banner.offsetLeft - 20 + "px";
        }
    }

function move_right() {
        if(banner.offsetLeft == (count - 1) * (-400)) {
            clear();
        } else {
            banner.style.marginLeft = banner.offsetLeft + 20 + "px";
        }
    }

function clear() {
        for(var x in arr) {
            window.clearInterval(arr[x]);
        }
    }
    //-----------------------------    分割线--------------------------------
</script>

<!--0     -500       -1000      -1500      x
1   0    2           3         4        n-->