图片滚播

最新推荐文章于 2021-05-15 23:35:47 发布

原创最新推荐文章于 2021-05-15 23:35:47 发布 · 384 阅读

CC 4.0 BY-SA版权

<style>
    .box{
        width: 1080px;
        height: 1080px;
        margin: 100px auto;
        position: relative;
        border: 1px solid burlywood;
        overflow: hidden;
    }
    .box span{
        width: 540px;
        height: 1080px;
        position: absolute;
        top: 0;
        cursor: pointer;
    }
    #left{
        left: 0;
    }
    #right{
        right: 0;
    }
    #pic{
        position: absolute;
        top: 0;
        left: 0;
    }

</style>

<div class="box">
    <img src="image/123.jpg" id="pic">
    <span id="left"></span>
    <span id="right"></span>
</div>

<script>
    function $(id) {
        return document.getElementById(id);
    };

    var num = 0;
    var tim = null;
    $("left").onmouseover = function () {
        tim = setInterval(time1,30);
        function time1() {
            num-=3;
            if(num>=-840){
                $("pic").style.left = num + "px";
            }
            else{
                clearInterval(tim);
            }
        }
    };
    $("left").onmouseout = function () {
        clearInterval(tim)
    };

    $("right").onmouseover = function () {
        tim = setInterval(time2,30);
        function time2() {
            num+=3;
            if(num>=-840&&num<0){
                $("pic").style.left = num + "px";
            }
            else {
                clearInterval(tim);
            }
        }
    };
    $("right").onmouseout = function () {
        clearInterval(tim)
    };
</script>

<script>
    function $(id) {
        return document.getElementById(id);
    };

    var num = 0;
    var tim = null;
    $("left").onmouseover = function () {
        tim = setInterval(time1,30);
        function time1() {
            num-=3;
            num>=-840? $("pic").style.left = num + "px":clearInterval(tim);
        }
    };
    $("left").onmouseout = function () {
        clearInterval(tim)
    };

    $("right").onmouseover = function () {
        tim = setInterval(time2,30);
        function time2() {
            num+=3;
            num<0?$("pic").style.left = num + "px":clearInterval(tim);
        }
    };
    $("right").onmouseout = function () {
        clearInterval(tim)
    };
</script>