用加减边距写图片轮播

css样式：

 <style>
        #tu {
            width: 800px;
            height: 500px;
            position: relative;
            overflow: hidden;
            margin: 30px auto;
        }

        #ta {
            width: 4000px;
            height: 500px;
            margin-left: 0px;
        }

        .lie {
            width: 800px;
            height: 500px;
            background-size: contain;
        }
    </style>

body：

<body>
    <form id="form1" runat="server">
        <div id="tu" onmouseover="pause()" onmouseout="contin()">
            <table id="ta" cellpadding="0" cellspacing="0">
                <tr height="500px">
                    <td class="lie">
                        <img src="1.jpg" width="800" height="100%" /></td>
                    <td class="lie">
                        <img src="2.jpg" width="800" height="100%" /></td>
                    <td class="lie">
                        <img src="3.jpg" width="800" height="100%" /></td>
                    <td class="lie">
                        <img src="4.jpg" width="800" height="100%" /></td>
                    <td class="lie">
                        <img src="5.jpg" width="800" height="100%" /></td>
                </tr>
            </table>
            <div id="zuo" style="width: 30px; height: 50px; background-color: black; float: left; top: 200px; position: absolute; opacity: 0.5;"></div>
            <div id="you" style="width: 30px; height: 50px; background-color: black; left: 770px; top: 200px; position: absolute; opacity: 0.5;"></div>
        </div>

    </form>
</body>

js代码：

<script>
    document.getElementById("ta").style.marginLeft = "0px";
    function huan() {
        var tp = document.getElementById("ta");
        var a = parseInt(tp.style.marginLeft);
        if (a <= -3200) {
            tp.style.marginLeft = "0px";

        }
        else {
            tp.style.marginLeft = (a - 800) + "px";

        }
      
    }
    var id = window.setInterval(huan, 2000);

    function pause() {
        window.clearInterval(id);
    }
    function contin() {
        id = window.setInterval(huan, 2000);
    }
    document.getElementById('zuo').onclick = function () {
        var tp = document.getElementById("ta");
        var a = parseInt(tp.style.marginLeft);
        if (a >= 0)
        { tp.style.marginLeft = "-3200px"; }
        else
        { tp.style.marginLeft = (a + 800) + "px"; }
    }
    document.getElementById('you').onclick = function () {
        var tp = document.getElementById("ta");
        var a = parseInt(tp.style.marginLeft);
        if (a <= -3200) {
            tp.style.marginLeft = "0px";

        }
        else {
            tp.style.marginLeft = (a - 800) + "px";

        }
    }

</script>

 

posted @ 2017-09-28 18:00  游称  阅读(148)  评论(0)    收藏  举报