js实现向上、向下、向左、向右无缝滚动

向左滚动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无缝滚动向左滚动</title>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        #wrapper {
            cursor: pointer;
            width: 600px;
            height: 200px;
            border: 1px solid pink;
            overflow: hidden;
            display: flex;
            margin: auto;
        }

        .scroll_content {
            display: flex;
        }

        #list,
        #list1 {
            display: flex;
        }

        .item {
            width: 200px;
            height: 200px;
            flex-shrink: 0;

        }
        .item img{
            width: 100%;
        }
        .item:nth-child(odd) {
            background: skyblue;
        }

        .item:nth-child(even) {
            background: yellow;
        }
    </style>
</head>

<body>
    <!-- 外层盒子 -->
    <div id="wrapper">
        <!-- 滚动盒子 -->
        <div id="scroll_content" class="scroll_content">
            <!-- 列表1 -->
            <div id="list">
                <div class="item">
                    <img src="../imgs/city1.png" alt="">
                </div>
                <div class="item">
                    <img src="../imgs/city2.png" alt="">
                </div>
                <div class="item">
                    <img src="../imgs/city3.png" alt="">
                </div>
                <div class="item">
                    <img src="../imgs/city4.png" alt="">
                </div>
                <div class="item">
                    <img src="../imgs/city5.png" alt="">
                </div>
            </div>
            <!-- 复制一份 -->
            <div id="list1">
            </div>
        </div>
    </div>
    <script>
        window.onload = function () {

            var speed = 10;
            var tab = document.getElementById("wrapper");
            var tab1 = document.getElementById("list");
            var tab2 = document.getElementById("list1");
            tab2.innerHTML = tab1.innerHTML;
            function Marquee() {
                if (tab2.offsetWidth - tab.scrollLeft <= 0)
                    tab.scrollLeft -= tab1.offsetWidth
                else {
                    tab.scrollLeft++;
                }
            }
            var MyMar = setInterval(Marquee, speed);
            tab.onmouseover = function () { clearInterval(MyMar) };
            tab.onmouseout = function () { MyMar = setInterval(Marquee, speed) };
        }
    </script>
</body>

</html>
向右滚动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无缝滚动向右滚动</title>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        #wrapper {
            cursor: pointer;
            width: 600px;
            height: 200px;
            border: 1px solid pink;
            overflow: hidden;
            display: flex;
            margin: auto;
        }

        .scroll_content {
            display: flex;
        }

        #list,
        #list1 {
            display: flex;
        }

        .item {
            width: 200px;
            height: 200px;
            flex-shrink: 0;

        }
        .item img{
            width: 100%;
        }

        .item:nth-child(odd) {
            background: skyblue;
        }

        .item:nth-child(even) {
            background: yellow;
        }

        #list1 .item:last-child {
            background: red;
        }
    </style>
</head>

<body>
    <!-- 外层盒子 -->
    <div id="wrapper">
        <!-- 滚动盒子 -->
        <div id="scroll_content" class="scroll_content">
            <!-- 列表1 -->
            <div id="list">
                <div class="item">
                    <img src="../imgs/city1.png" alt="">
                </div>
                <div class="item">
                    <img src="../imgs/city2.png" alt="">
                </div>
                <div class="item">
                    <img src="../imgs/city3.png" alt="">
                </div>
                <div class="item">
                    <img src="../imgs/city4.png" alt="">
                </div>
                <div class="item">
                    <img src="../imgs/city5.png" alt="">
                </div>
            </div>
            <!-- 复制一份 -->
            <div id="list1">
            </div>
        </div>
    </div>
    <script>
        window.onload = function () {

            var speed = 10;
            var tab = document.getElementById("wrapper");
            var tab1 = document.getElementById("list");
            var tab2 = document.getElementById("list1");
            tab2.innerHTML = tab1.innerHTML;
            function Marquee() {
                if (tab.scrollLeft <= 0) {
                    tab.scrollLeft += tab2.offsetWidth
                }
                else {
                    tab.scrollLeft--;
                }
                
                console.log(tab.scrollLeft, tab2.offsetWidth);
            }
            var MyMar = setInterval(Marquee, speed);
            tab.onmouseover = function () { clearInterval(MyMar) };
            tab.onmouseout = function () { MyMar = setInterval(Marquee, speed) };
        }
    </script>
</body>

</html>
向上滚动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>向上滚动</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #wrapper {
            width: 200px;
            height: 600px;
            overflow: hidden;
            margin: 10px;
        }

        .item {
            width: 200px;
            height: 200px;
        }
        .item img{
            width: 100%;
        }
        .item:nth-child(odd) {
            background: skyblue;
        }

        .item:nth-child(even) {
            background: pink;
        }
    </style>
</head>

<body>
    <div id="wrapper">
        <div class="scroll_content">
            <div id="list">
                <div class="item">
                    <img src="../imgs/city1.png" alt="">
                </div>
                <div class="item">
                    <img src="../imgs/city2.png" alt="">
                </div>
                <div class="item">
                    <img src="../imgs/city3.png" alt="">
                </div>
                <div class="item">
                    <img src="../imgs/city4.png" alt="">
                </div>
                <div class="item">
                    <img src="../imgs/city5.png" alt="">
                </div>
            </div>
            <div id="list1"></div>
        </div>
    </div>
    <script>
        var speed = 10; //数字越大速度越慢
        var wrapper = document.getElementById("wrapper");
        var list = document.getElementById("list");
        var list1 = document.getElementById("list1");
        list1.innerHTML = list.innerHTML; //克隆list为list1
        function Marquee() {
            if (list1.offsetTop - wrapper.scrollTop <= 0)
                wrapper.scrollTop -= list.offsetHeight 
            else {
                wrapper.scrollTop++
            }
        }
        var MyMar = setInterval(Marquee, speed);
        wrapper.onmouseover = function () { clearInterval(MyMar) };
        wrapper.onmouseout = function () { MyMar = setInterval(Marquee, speed) };
    </script>
</body>

</html>
向下滚动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>向下滚动</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #wrapper {
            width: 200px;
            height: 600px;
            overflow: hidden;
            margin: 10px;
            cursor: pointer;
        }

        .item {
            width: 200px;
            height: 200px;
        }
        .item img{
            width: 100%;
        }
        .item:nth-child(odd) {
            background: skyblue;
        }

        .item:nth-child(even) {
            background: pink;
        }
    </style>
</head>

<body>
    <div id="wrapper">
        <div class="scroll_content">
            <div id="list">
                <div class="item">
                    <img src="../imgs/city1.png" alt="">
                </div>
                <div class="item">
                    <img src="../imgs/city2.png" alt="">
                </div>
                <div class="item">
                    <img src="../imgs/city3.png" alt="">
                </div>
                <div class="item">
                    <img src="../imgs/city4.png" alt="">
                </div>
                <div class="item">
                    <img src="../imgs/city5.png" alt="">
                </div>
            </div>
            <div id="list1"></div>
        </div>
    </div>
    <script>
        var speed = 10; //数字越大速度越慢
        var tab = document.getElementById("wrapper");
        var tab1 = document.getElementById("list");
        var tab2 = document.getElementById("list1");
        tab2.innerHTML = tab1.innerHTML; 
        tab.scrollTop = tab.scrollHeight
        function Marquee() {
            if (tab1.offsetTop - tab.scrollTop >= 0)
                tab.scrollTop += tab2.offsetHeight 
            else {
                tab.scrollTop--
            }
        }
        var MyMar = setInterval(Marquee, speed);
        tab.onmouseover = function () { clearInterval(MyMar) };
        tab.onmouseout = function () { MyMar = setInterval(Marquee, speed) };
    </script>
</body>

</html>

你可能感兴趣的:(javascript,前端)