一个简单的左右控制轮播图

最新推荐文章于 2021-10-02 00:23:23 发布

小lai

最新推荐文章于 2021-10-02 00:23:23 发布

阅读量639

点赞数

文章标签： javascript js html

本文链接：https://blog.csdn.net/qq_40480634/article/details/108737014

版权

大家好我是小lai，这是我在CSDN的第一个博客，共同进步，记录点滴

下面这个是一个简单的左右控制轮播图，简单易懂，还带了一点小延迟动画

！<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
            #box {
                margin: 0 auto;
                background: lightblue;
                height: 300px;
                width: 700px;
                overflow: auto;
                overflow-x: hidden;
                transition: all .5s linear;
            }
            
            #box>#container {
                width: 1200px;
                height: 300px;
                background: lightslategray;
                display: flex;
            }
            
            #box>#container>div:nth-child(1) {
                height: 300px;
                width: 20vw;
                background: black;
            }
            
            #box>#container>div:nth-child(2) {
                height: 300px;
                width: 20vw;
                background: lightgreen;
            }
            
            #box>#container>div:nth-child(3) {
                height: 300px;
                width: 20vw;
                background: lightpink;
            }
            
            #box>#container>.container>div:nth-child(4) {
                height: 300px;
                width: 20vw;
                background: lightseagreen;
            }
            
            #box>#container>div:nth-child(5) {
                height: 300px;
                width: 20vw;
                background: lightsalmon;
            }
            
            #left {
                top: 20%;
                position: absolute;
                height: 20px;
                width: 20px;
                background: lightyellow;
                z-index: 99;
            }
            
            #right {
                top: 20%;
                margin-left: 44.3%;
                position: absolute;
                height: 20px;
                width: 20px;
                background: red;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <div id="left">
                <
            </div>
            <div id="right">
                >
            </div>
            <div id="container">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        var container = document.getElementById('box');
        console.log(container);
        var left = document.getElementById('left').onclick = function() {
            var a = 0;
            var ss = setInterval(function() {
                console.log(3);
                a++;

				//向左移动200px
                if(a < 200) {
				//scrollBy() 方法可把内容滚动指定的像素数。
                    container.scrollBy(-.5, 0);
                } else {
				//然后清除
                    clearInterval(ss);
                }
            }, 1)
        };

		//同上
        var right = document.getElementById('right').onclick = function() {
            var r = 0;
            var qq = setInterval(function() {
                console.log(4);
                r++;
                if(r < 200) {
                    container.scrollBy(1, 0);
                } else {
                    clearInterval(qq);
                }
            }, 1)
        };
    </script>
</html>