js无缝滚动原理

最新推荐文章于 2024-07-05 13:30:00 发布

花花最美腻

最新推荐文章于 2024-07-05 13:30:00 发布

阅读量1.2k

点赞数 2

分类专栏： JavaScript 文章标签： JavaScript 无缝滚动轮播图

本文链接：https://blog.csdn.net/qq_38912819/article/details/80557863

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        #content {
            width: 400px;
            height: 200px;
            border: 1px solid #000;
            margin: 100px auto;
            overflow: hidden;
            position: relative;
        }

        ul {
            width: 520px;
            overflow: hidden;
            position: absolute;
            left: 0px;
            top: 0px;
        }

        li {
            width: 120px;
            height: 120px;
            background: pink;
            float: left;
            margin-right: 10px;
            text-align: center;
            line-height: 120px;
            font-size: 40px;
            color: #fff;
        }

        #btn {
            /*margin-top:15px;*/
            margin: 135px auto 0;
            width: 210px;
        }

        #btn span {
            display: inline-block;
            width: 100px;
            height: 50px;
            background: palevioletred;
            color: #fff;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>
<body>
<div id="content">
    <ul id="img-box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <div id="btn">
        <span id="left">向左</span>
        <span id="right">向右</span>
    </div>
</div>
<script>

    var oImgBox = document.getElementById("img-box");
    var oRight = document.getElementById("right");
    var oLeft= document.getElementById("left");
    oImgBox.innerHTML += oImgBox.innerHTML;/*两套li 让显示的时候衔接上*/
    oImgBox.style.width = oImgBox.offsetWidth * 2 + "px"; /*oImgBox宽度*2*/
    var speed = -3;/*初始向左滚动*/

    timer = setInterval(function () {
        if (oImgBox.offsetLeft <= -oImgBox.offsetWidth / 2) {/*offsetWidth获取宽度 offsetLeft获取left*/
            oImgBox.style.left = 0;/*当left<=oImgBox宽度的一半时 让其left值为0*/
        }
        if (oImgBox.offsetLeft > 0) {/*同理*/
            oImgBox.style.left = -oImgBox.offsetWidth / 2 + "px";
        }
        oImgBox.style.left = oImgBox.offsetLeft + speed + "px";
    }, 20);
    oRight.onmouseover = function () {
        speed = 3;  /*正值向右*/
    }
    oLeft.onmouseover = function () {
        speed = -3;
    }
</script>
</body>
</html>