2019.11.9 极其简易的轮播

简易轮播

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            #kuangjia {
                margin: 0 auto;
                overflow: hidden;
                width: 400px;
                height: 250px;
                border: 2px solid rgba(0, 0, 0, 0.1);
            }

            #didi {
                width: 2000px;
                height: 250px;
            }

            .tupian {
                float: left;
                width: 400px;
                height: 250px;
            }

            img {
                width: 100%;
                height: 100%;
            }

            body {
                text-align: center;
            }
            .gege{
                margin-left: 630px;
                width: 110px;
                height: 20px;
            }
            .yuan{
                margin-left: 10px;
                float: left;
                width: 10px;
                height: 10px;
                border-radius: 5px;
                background-color: #000000;
            }
        </style>
    </head>
    <body>
        <button type="button" style="width: 100px;height: 50px;" onclick="ff(-1)" onmouseover="pp()" onmouseout="op()">向左</button>
        <button type="button" style="width: 100px;height: 50px;" onclick="ff(1)" onmouseover="pp()" onmouseout="op()">向右</button>
        <div id="kuangjia">
            <div id="didi">
                <div class="tupian"><img src="../../js/img/01.png"></div>
                <div class="tupian"><img src="../../js/img/02.jpg"></div>
                <div class="tupian"><img src="../../js/img/03.jpg"></div>
                <div class="tupian"><img src="../../js/img/04.jpg"></div>
                <div class="tupian"><img src="../../js/img/05.jpg"></div>
            </div>
        </div>
        <div class="gege">
            <div class="yuan" onclick="ll(0)" onmouseover="pp()" onmouseout="op()"></div>
            <div class="yuan" onclick="ll(1)" onmouseover="pp()" onmouseout="op()"></div>
            <div class="yuan" onclick="ll(2)" onmouseover="pp()" onmouseout="op()"></div>
            <div class="yuan" onclick="ll(3)" onmouseover="pp()" onmouseout="op()"></div>
            <div class="yuan" onclick="ll(4)" onmouseover="pp()" onmouseout="op()"></div>
        </div>
    </body>
</html>
<script type="text/javascript">
    var a = 0;
    var b = document.getElementById("didi");
    var c;
    // -------------------------------
    c = setInterval(function() {
        b.style.transition = "2s";
        a = a - 400;
        if (a <= -2000) {
            a = 0;
            b.style.transition = "0s";
        }
        b.style.marginLeft = a + "px";
    }, 2000)
    // ---------------------------------
    function ff(ii) {
        a = a + ii * 400;
        if (a <= -1600) {
            a = 0;
            b.style.transition = "2s";
        } else if (a >= 0) {
            a = -1600;
            b.style.transition = "2s";
        }
        b.style.marginLeft = a + "px";
    }

    function ll(gg) {
        a = gg * (-400);
        b.style.marginLeft = a + "px";
    };
    //清除定时器
    function pp() {
        window.clearInterval(c);
    };
    //回复定时器
    function op() {
        c = setInterval(function() {
            b.style.transition = "2s";
            a = a - 400;
            if (a <= -2000) {
                a = 0;
                b.style.transition = "0s";
            };


            b.style.marginLeft = a + "px";
        }, 2000)
    };
</script>

 

posted @ 2019-11-10 15:42  墨染千城  阅读(130)  评论(0)    收藏  举报